ゼロから学ぶ React, Next.js⑰【Learn Next.js】Chapter10
【Chapter10】 部分的なプリレンダリング（オプション）
部分的なプリレンダリングは、Next.js 14で導入された実験的な機能です。このページの内容は、機能の安定性が向上するにつれて更新される可能性があります。実験的な機能を使用したくない場合は、この章をスキップしてもかまいません。この章は、コースを完了するために必須ではありません。
この章で扱うトピック
- 📄 部分的なプリレンダリングとは何か。
- ⚙️ 部分的なプリレンダリングの仕組み。
静的コンテンツと動的コンテンツの組み合わせ
現在、ルート内で動的な関数（noStore()、cookies()など）を呼び出すと、ルート全体が動的になります。
これは、現在のほとんどのWebアプリケーションが構築される方法です。アプリケーション全体または特定のルートについて、静的レンダリングと動的レンダリングのいずれかを選択します。
ただし、ほとんどのルートが完全に静的または動的ではありません。静的コンテンツと動的コンテンツの両方を持つルートがある可能性があります。たとえば、eコマースサイトについて考えてみましょう。製品ページの大部分をプリレンダリングできる可能性がありますが、ユーザーのカートとおすすめの製品をオンデマンドで動的にフェッチしたい場合があります。
ダッシュボードページに戻って、どのコンポーネントを静的と見なし、どのコンポーネントを動的と見なしますか？
準備ができたら、下のボタンをクリックして、ダッシュボードルートをどのように分割するかを確認してください：
解答
-
<SideNav>コンポーネントはデータに依存せず、ユーザーに合わせてパーソナライズされないため、静的にすることができます。 -
<Page>内のコンポーネントは、頻繁に変更され、ユーザーに合わせてパーソナライズされるデータに依存しているため、動的にすることができます。
部分的なプリレンダリングとは？
Next.js 14には、部分的なプリレンダリングのプレビューが含まれています。これは、一部を動的に保ちながら、静的な読み込みシェルでルートをレンダリングできる実験的な機能です。つまり、ルートの動的な部分を分離できます。例えば：
ユーザーがルートにアクセスすると：
- 静的なルートシェルが提供され、高速な初期読み込みが保証されます。
- シェルは、動的なコンテンツが非同期に読み込まれる場所に穴を残します。
- 非同期の穴は並行してストリーミングされ、ページの全体的な読み込み時間を短縮します。
これは、ルート全体が完全に静的または動的であるという、現在のアプリケーションの動作とは異なります。
部分的なプリレンダリングは、超高速の静的エッジ配信と完全に動的な機能を組み合わせたもので、Webアプリケーションのデフォルトのレンダリングモデルになる可能性があり、静的サイト生成と動的配信の長所を兼ね備えていると考えられています。
クイズの時間です！
知識をテストし、学んだことを確認しましょう。部分的なプリレンダリングの文脈における「穴」とは何ですか？
A. JavaScriptが無効になっている場所
B. 動的コンテンツが非同期に読み込まれる場所
C. サードパーティのスクリプトが読み込まれる場所
解答
B. 動的コンテンツが非同期に読み込まれる場所
穴とは、リクエスト時に動的コンテンツが非同期にロードされる場所のことです。
部分的なプリレンダリングの仕組み
部分的なプリレンダリングは、ReactのConcurrent APIを活用し、Suspenseを使用して、ある条件が満たされるまで（例えば、データが読み込まれるまで）アプリケーションの一部のレンダリングを延期します。
フォールバックは、他の静的コンテンツとともに初期の静的ファイルに埋め込まれます。ビルド時（または再検証中）に、ルートの静的な部分がプリレンダリングされ、残りの部分はユーザーがルートをリクエストするまで延期されます。
Suspenseでコンポーネントをラップしても、コンポーネント自体が動的になるわけではありません（この動作を実現するにはunstable_noStoreを使用したことを思い出してください）。むしろ、Suspenseはルートの静的な部分と動的な部分の境界として使用されます。
部分的なプリレンダリングの優れた点は、使用するためにコードを変更する必要がないことです。ルートの動的な部分をラップするためにSuspenseを使用している限り、Next.jsはルートのどの部分が静的でどの部分が動的かを知ることができます。
まとめ
まとめると、アプリケーションでのデータフェッチを最適化するために、いくつかのことを行いました：
- サーバーとデータベース間のレイテンシを削減するために、アプリケーションコードと同じリージョンにデータベースを作成しました。
- React Server Componentsを使用してサーバー上でデータをフェッチしました。これにより、高価なデータフェッチとロジックをサーバー上に保持し、クライアント側のJavaScriptバンドルを削減し、データベースのシークレットがクライアントに公開されるのを防ぐことができます。
- SQLを使用して必要なデータのみをフェッチし、各リクエストで転送されるデータ量とメモリ内でデータを変換するために必要なJavaScriptの量を削減しました。
- JavaScriptを使用してデータフェッチを並列化しました（適切な場合）。
- ストリーミングを実装して、遅いデータリクエストがページ全体をブロックするのを防ぎ、すべてが読み込まれるのを待たずにユーザーがUIの操作を開始できるようにしました。
- データフェッチを、それを必要とするコンポーネントに移動し、ルートのどの部分を動的にすべきかを分離して、部分的なプリレンダリングに備えました。
次の章では、データをフェッチする際に実装する必要がある2つの一般的なパターン（検索とページネーション）について見ていきます。
次の章
Discussion