lazy 和 dynamic 是兩種在 React 和 Next.js 中使用的代碼分割和動態加載技術，它們的主要目的是優化應用性能，減少初始加載時間。然而，它們的使用場景和特性有所不同。

React.lazy

React.lazy 是 React 原生提供的一種動態加載組件的方法，通常與 Suspense 一起使用。React.lazy 允許您按需加載組件，這意味著只有在組件實際需要渲染時才會加載相應的代碼。

特點

• 僅用於客戶端渲染：React.lazy 僅在客戶端生效，不適用於服務器端渲染。
• 與 Suspense 一起使用：需要配合 Suspense 組件來指定加載狀態。

使用示例

import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

const MyComponent = () => (
  <div>
    <h1>Hello World</h1>
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  </div>
);

export default MyComponent;

next/dynamic

next/dynamic 是 Next.js 提供的一個用於動態加載組件的函數，它支持客戶端和服務器端渲染，並且具有更多的配置選項，例如禁用服務器端渲染 (ssr: false) 和設置加載組件 (loading 屬性)。

特點

• 支持 SSR：可以控制組件在服務器端是否加載。
• 更多配置選項：可以設置加載狀態組件和其他配置。

使用示例

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('./DynamicComponent'), {
  ssr: false,
  loading: () => <p>Loading...</p>,
});

const MyComponent = () => (
  <div>
    <h1>Hello World</h1>
    <DynamicComponent />
  </div>
);

export default MyComponent;

關鍵區別

1. 用於環境：
   • React.lazy 僅用於客戶端渲染。
   • next/dynamic 可用於客戶端和服務器端渲染。
2. 配置選項：
   • React.lazy 配置較少，需要配合 Suspense 使用。
   • next/dynamic 配置靈活，支持更多選項，如禁用 SSR、設置加載組件等。
3. 適用場景：
   • React.lazy 適用於純客戶端渲染的 React 應用。
   • next/dynamic 更適合 Next.js 應用，能夠靈活控制在客戶端和服務器端的行為。

範例