懒加载 (Lazy Loading)
Next.js 中的懒加载通过减少渲染路由所需的 JavaScript 代码量，帮助提升应用的初始加载性能。
它允许您延迟加载客户端组件 (Client Components) 和导入的库，仅在需要时才将它们包含在客户端包中。例如，您可以延迟加载一个模态框，直到用户点击打开它。
在 Next.js 中有两种实现懒加载的方式：
- 使用
next/dynamic进行动态导入 - 使用
React.lazy()配合 Suspense
默认情况下，服务端组件 (Server Components) 会自动进行代码分割 (code split)，您可以使用流式传输 (streaming) 逐步从服务端向客户端发送 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)
要在客户端动态加载组件，可以使用 ssr 选项禁用服务端渲染。这在外部依赖或组件依赖 window 等浏览器 API 时非常有用。
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>
)
}