︙

Lazy Loading

Lazy loading は、 Next.js において、最初の loading 性能を向上させるために、 route を render するのに必要な JavaScript の量を減らすのに役立ちます。

それにより、Client Componentsやインポートされたライブラリの loading を延期し、それらが必要となったときにだけ client バンドルに含めることが可能になります。例えば、ユーザーがそれを開くためにクリックするまでモーダルの loading を延期することができるでしょう。

あなたが Next.js で lazy loading を実装できる 2 つの方法があります:

Dynamic Imports をnext/dynamicで使用する
React.lazy() を Suspense と共に使用する

default では、Server Components は自動的に code split され、streaming を使用して UI の一部を server から client に順次送信できます。Lazy loading は、Client Components に適用されます。

`next/dynamic`

next/dynamicは React.lazy() と Suspense の組み合わせです。これはappとpagesディレクトリで同じように動作し、段階的な移行を可能にします。

Examples

next/dynamicを使用することにより、 header component はページの初期の JavaScript バンドルに含まれません。ページは、まず Suspense のfallbackを render し、次にSuspense境界が解決されたときにHeader component を表示します。

import dynamic from "next/dynamic";

const DynamicHeader = dynamic(() => import("../components/header"), {
  loading: () => <p>Loading...</p>,
});

export default function Home() {
  return <DynamicHeader />;
}

Good to know: import('path/to/component')の中の path は明示的に書かなければなりません。テンプレート string や variable にすることはできません。さらに、import()は、Next.js が webpack バンドル／モジュール ID を特定のdynamic()呼び出しにマッチさせ、rendering 前にプリロードするために、dynamic()呼び出しの中になければなりません。dynamic()は、プリロードが機能するためにはモジュールのトップレベルでマークされる必要があり、React.lazyと同様、React の rendering の中で使うことはできません。

With named exports

名前付きの export を動的に import するには、import() によって返される Promise からそれを返すことができます：

components/hello.js

export function Hello() {
  return <p>Hello!</p>
}

// pages/index.js
import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() =>
  import('../components/hello').then((mod) => mod.Hello)
)

With no SSR

Dynamic に component を client サイドでロードするには、ssrオプションを使用して server レンダリングを無効にすることができます。これは、外部依存関係や component がwindowのようなブラウザ API に依存している場合に便利です。

import dynamic from "next/dynamic";

const DynamicHeader = dynamic(() => import("../components/header"), {
  ssr: false,
});

With external libraries

この例では、曖昧な検索のための外部の library 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="Search"
        onChange={async (e) => {
          const { value } = e.currentTarget;
          // Dynamically load 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>
  );
}