如何懒加载客户端组件 (Client Components) 和库
Next.js 中的延迟加载通过减少渲染路由所需的 JavaScript 代码量，帮助提升应用的初始加载性能。
它允许您推迟加载客户端组件 (Client Components) 和导入的库，仅在需要时才将它们包含在客户端包中。例如，您可以延迟加载模态框，直到用户点击打开它时才加载。
在 Next.js 中有两种实现延迟加载的方式：
- 使用
next/dynamic进行动态导入 - 使用
React.lazy()配合 Suspense
默认情况下，服务端组件 (Server Components) 会自动进行代码分割，您可以使用流式传输逐步将 UI 片段从服务器发送到客户端。延迟加载适用于客户端组件。
next/dynamic
next/dynamic 是 React.lazy() 和 Suspense 的组合。它在 app 和 pages 目录中的行为相同，便于渐进式迁移。
示例
使用 next/dynamic 时，头部组件不会包含在页面的初始 JavaScript 包中。页面会先渲染 Suspense 的 fallback，当 Suspense 边界解析完成后才会渲染 Header 组件。
import dynamic from 'next/dynamic'
const DynamicHeader = dynamic(() => import('../components/header'), {
loading: () => <p>加载中...</p>,
})
export default function Home() {
return <DynamicHeader />
}须知：在
import('path/to/component')中，路径必须明确写出。不能使用模板字符串或变量。此外，import()必须放在dynamic()调用内部，这样 Next.js 才能将 webpack 包/模块 ID 与特定的dynamic()调用匹配，并在渲染前预加载它们。dynamic()不能用在 React 渲染中，因为它需要标记在模块的顶层才能实现预加载，这与React.lazy类似。
导入具名导出
要动态导入具名导出，可以从 import() 返回的 Promise 中返回它：
export function Hello() {
return <p>你好！</p>
}
// pages/index.js
import dynamic from 'next/dynamic'
const DynamicComponent = dynamic(() =>
import('../components/hello').then((mod) => mod.Hello)
)禁用服务端渲染
要在客户端动态加载组件，可以使用 ssr 选项禁用服务端渲染。这在外部依赖或组件需要依赖浏览器 API（如 window）时非常有用。
'use client'
import dynamic from 'next/dynamic'
const DynamicHeader = dynamic(() => import('../components/header'), {
ssr: false,
})使用外部库
此示例使用外部库 fuse.js 实现模糊搜索。该模块仅在用户在搜索输入框中输入后才会在浏览器中加载。
import { useState } from 'react'
const names = ['Tim', 'Joe', 'Bel', 'Lee']
export default function Page() {
const [results, setResults] = useState()
return (
<div>
<input
type="text"
placeholder="搜索"
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>结果: {JSON.stringify(results, null, 2)}</pre>
</div>
)
}