懒加载

在 Nexjs 中有两种方式实现懒加载

1. 使用 React.lazy() 和 Suspense

2. 使用 next/dynamic 实现动态导入

默认情况下，服务端组件自动进行代码分隔，并且可以使用流将 UI 片段逐步发送到客户端，所以懒加载应用于客户端。

React.lazy 与 Suspense

我们先讲讲 React 的 lazy 方法，lazy 可以实现延迟加载组件代码，直到组件首次被渲染。

换句话说，直到组件需要渲染的时候才加载组件的代码。使用示例如下：

import { Suspense, lazy } from "react";

const MarkdownPreview = lazy(() => import("./MarkdownPreview.js"));

export default function Page() {
  return (
    <Suspense fallback={"loading"}>
      <h2>Preview</h2>
      <MarkdownPreview />
    </Suspense>
  );
}

next/dynamic

不过开发 Next.js 应用的时候，大部分时候并不需要用到 React.lazy 和 Suspense，使用 next/dynamic 即可，它本质就是 React.lazy 和 Suspense 的复合实现。在 app 和 pages 目录下都可以使用。

• 基本示例:

// app/page.js
import dynamic from "next/dynamic";

// Server Component:
const ServerComponent = dynamic(() => import("../components/ServerComponent"));

export default function ServerComponentExample() {
  return (
    <div>
      <ServerComponent />
    </div>
  );
}

跳过 SSR

// app/page.js
import dynamic from "next/dynamic";

// Server Component:
const ServerComponent = dynamic(() => import("../components/ServerComponent"), {
  ssr: false,
});

export default function ServerComponentExample() {
  return (
    <div>
      <ServerComponent />
    </div>
  );
}