面试题：Next.js中懒加载组件的常用方法有哪些

Question

在Next.js项目中，列举至少两种实现组件懒加载的常用方式，并简要说明每种方式的特点及适用场景。

Answer 1

React.lazy 和 Suspense

• 特点：这是 React 内置的懒加载方式。React.lazy 用于动态导入组件，只有在组件实际需要渲染时才会加载其代码。Suspense 组件用于在组件加载过程中显示加载状态，如 loading 指示器等。它可以捕获动态导入组件的 Promise，并在等待其解析时显示备用内容。
• 适用场景：适用于大多数 Next.js 项目场景，特别是希望在加载复杂组件或第三方库组件时，优化初始加载性能，减少首屏加载时间，同时给用户提供良好的加载反馈体验。

next/dynamic

• 特点：Next.js 提供的动态导入方法。它除了支持 React.lazy 类似的懒加载功能外，还支持一些 Next.js 特有的配置，例如可以通过 ssr: false 配置项来控制是否在服务端渲染时加载该组件，这在一些仅需要客户端渲染的组件场景下非常有用。它也支持 loading 组件的配置，用于加载过程中展示。
• 适用场景：当需要对组件的服务端渲染和客户端渲染进行精细控制时，或者希望利用 Next.js 特定配置来优化组件加载行为时使用。例如一些依赖浏览器特定 API 的组件，或者纯客户端交互组件，可通过 next/dynamic 配置实现按需加载且避免在服务端渲染时出错。