Partial pre-rendering

静的なレイアウトと動的コンテンツを含むページがある場合、Partial pre-renderingを使用して静的コンテンツのみをプリレンダリングできます。その後、ランタイムはプリレンダリングされたコンテンツと JSON ファイルに保存された状態を使用して、オンデマンドでの動的コンテンツのレンダリングを続行します。

Suspense を使用して JSX を静的コンテンツと動的コンテンツに分割し、'use dynamic' ディレクティブを使用して動的コンポーネントをマークできます。マークされたコンポーネントのレンダリングは、「延期」され、本番サーバーでの実行時にプリレンダリングされた HTML コンテンツ、レンダリング再開に使用される JSON の状態、そして 'use static' ディレクティブを使用してマークされたすべてのコンポーネントのキャッシュエントリを利用して行われます。

'use static' ディレクティブを使用すると、コンポーネントをビルド時にキャッシュし、静的データとして利用するようマークできます。このディレクティブは、実行時にデータをキャッシュする 'use cache' ディレクティブの特化バージョンです。'use static' でマークされたコンポーネントのキャッシュエントリはビルド出力に保存され、実行時に読み込まれてコンポーネントのレンダリング時に利用されます。これにより、日付や時刻などビルド時と実行時で値が変化する非決定的なデータにも対応できます。このディレクティブを使用しない場合、コンポーネントは実行時に再レンダリングされ、ビルド時に表示された値と異なる値が表示されてハイドレーションミスマッチが発生する可能性があります。

import { Suspense } from "react";

async function DynamicComponent() {
  "use dynamic";
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return <div>Dynamic content</div>;
}

function StaticComponent() {
  "use static";
  return <div>Built at {new Date().toISOString()}</div>;
}

export default function App() {
  return (
    <div>
      <h1>Static content</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <DynamicComponent data={data} />
      </Suspense>
      <StaticComponent />
    </div>
  );
}

Partial pre-renderingを有効にするには、プリレンダリングしたページを静的ページとしてエクスポートする必要があります。そのためには、react-server.config.mjsにexportを追加してください。静的エクスポートの詳細については、静的生成を参照してください。

export default {
  export(paths) {
    return [
      ...paths,
      { path: "/" }
    ]
  }
};

build コマンドを実行すると、ランタイムはエクスポートしたページをプリレンダリングし、プリレンダリングしたコンテンツをプロジェクトの .react-server フォルダに格納します。プリレンダリングされたコンテンツは本番サーバーで使用され、ページのレンダリングが高速化されます。

Partial pre-renderingを無効にするには、react-server.config.mjsに prerender: false を追加します。

export default {
  prerender: false
};