懒加载
Next.js中的懒加载通过减少渲染路由所需的JavaScript数量,来帮助提高应用程序的初始加载性能。
它允许你延迟加载客户端组件和导入的库,只在需要时将它们包含在客户端包中。例如,你可能想延迟加载一个模态框,直到用户点击打开它。
在Next.js中有两种实现懒加载的方式:
- 使用
next/dynamic
的动态导入 - 使用
React.lazy()
和Suspense
默认情况下,服务器组件会自动进行代码分割,你可以使用流式传输从服务器到客户端逐步发送UI片段。懒加载适用于客户端组件。
next/dynamic
next/dynamic
是React.lazy()
和Suspense的组合。它在app
和pages
目录中的行为相同,以允许增量迁移。
示例
导入客户端组件
app/page.js
"use client";
import { useState } from "react";
import dynamic from "next/dynamic";
// 客户端组件:
const ComponentA = dynamic(() => import("../components/A"));
const ComponentB = dynamic(() => import("../components/B"));
const ComponentC = dynamic(() => import("../components/C"), { ssr: false });
export default function ClientComponentExample() {
const [showMore, setShowMore] = useState(false);
return (
<div>
{/* 立即加载,但在单独的客户端包中 */}
<ComponentA />
{/* 按需加载,仅在满足条件时 */}
{showMore && <ComponentB />}
<button onClick={() => setShowMore(!showMore)}>Toggle</button>
{/* 仅在客户端加载 */}
<ComponentC />
</div>
);
}
跳过SSR
使用React.lazy()
和Suspense时,客户端组件默认会进行预渲染(SSR)。
注意:
ssr: false
选项仅适用于客户端组件,请将其移至客户端组件以确保客户端代码分割正常工作。
如果你想禁用客户端组件的预渲染,可以使用ssr
选项设置为false
:
const ComponentC = dynamic(() => import("../components/C"), { ssr: false });
导入服务器组件
如果你动态导入一个服务器组件,只有该服务器组件的子客户端组件会被懒加载 - 而不是服务器组件本身。 当你在服务器组件中使用它时,它还会帮助预加载 CSS 等静态资源。
app/page.js
import dynamic from "next/dynamic";
// 服务器组件:
const ServerComponent = dynamic(() => import("../components/ServerComponent"));
export default function ServerComponentExample() {
return (
<div>
<ServerComponent />
</div>
);
}
注意:
ssr: false
选项在服务器组件中不受支持。如果你尝试在服务器组件中使用它,将会看到错误。 在服务器组件中不允许在next/dynamic
中使用ssr: false
。请将其移至客户端组件。
加载外部库
可以使用import()
函数按需加载外部库。这个例子使用外部库fuse.js
进行模糊搜索。该模块只在用户在搜索输入框中输入后才在客户端加载。
app/page.js
"use client";
import { useState } from "react";
const names = ["Tim", "Joe", "Bel", "Lee"];
export default function Page() {
const [results, setResults] = useState();
return (
<div>
<input
type="text"
placeholder="Search"
onChange={async (e) => {
const { value } = e.currentTarget;
// 动态加载fuse.js
const Fuse = (await import("fuse.js")).default;
const fuse = new Fuse(names);
setResults(fuse.search(value));
}}
/>
<pre>Results: {JSON.stringify(results, null, 2)}</pre>
</div>
);
}
添加自定义加载组件
app/page.js
import dynamic from "next/dynamic";
const WithCustomLoading = dynamic(
() => import("../components/WithCustomLoading"),
{
loading: () => <p>Loading...</p>,
}
);
export default function Page() {
return (
<div>
{/* 加载组件将在<WithCustomLoading/>加载时渲染 */}
<WithCustomLoading />
</div>
);
}
导入命名导出
要动态导入命名导出,你可以从import()
函数返回的Promise中返回它:
components/hello.js
"use client";
export function Hello() {
return <p>Hello!</p>;
}
app/page.js
import dynamic from "next/dynamic";
const ClientComponent = dynamic(() =>
import("../components/hello").then((mod) => mod.Hello)
);