Chapter10 Partial Prerendering (Optional)

[ShotaroHirose59]

Partial Prerendering is an experimental feature introduced in Next.js 14. The content of this page may be updated as the feature progresses in stability. https://nextjs.org/learn/dashboard-app/partial-prerendering

Topics

• What Partial Prerendering is.
• How Partial Prerendering works.

[ShotaroHirose59]

部分プリレンダリングと動的生成を組み合わせたレンダリング手法

When a user visits a route:

• A static route shell is served, ensuring a fast initial load.
• The shell leaves holes where dynamic content will load in asynchronous.
• The async holes are streamed in parallel, reducing the overall load time of the page.

[ShotaroHirose59]

部分的なプリレンダリングはどのように機能しますか?

Partial PrerenderingはReactのConcurrent APIを活用し、Susppenseを使用して、何らかの条件が満たされるまで（例えばデータがロードされるまで）アプリケーションの一部のレンダリングを延期する。

フォールバックは、他の静的コンテンツと一緒に最初の静的ファイルに埋め込まれます。ビルド時 (もしくは再検証時) に、ルートの静的な部分はプリレンダリングされ、残りはユーザーがルートをリクエストするまで延期される。

コンポーネントを Suspense でラップしても、コンポーネント自体が動的になるわけではなく (この動作を実現するために unstable_noStore を使用したことを覚えておいてください)、むしろ Suspense はルートの静的な部分と動的な部分の境界として使用されます。

確かにそうだった。 Suspenseで囲ってもそのコンポーネント自体が動的になるわけではない。Suspenseは境界

部分的なプリレンダリングの素晴らしいところは、それを使うためにコードを変更する必要がないことです。ルートの動的な部分をラップするためにSusppenseを使用している限り、Next.jsはルートのどの部分が静的で、どの部分が動的であるかを知ることができます。

境界を作っておけば、Partial Prerenderingが実装可能になった時に、動的レンダリングされるコンポーネントのコードには影響はなさそう

[ShotaroHirose59]

アプリケーションのデータ・フェッチを最適化するためにこれまでやってきたこと

• アプリケーション・コードと同じリージョンにデータベースを作成
  • サーバーとデータベース間の待ち時間を短縮
• React Server Componentsでサーバー上のデータをフェッチ
  • 高価(expensive)なデータフェッチとロジックをサーバー上に保持し、クライアント側のJavaScriptバンドルを減らし、データベースの秘密がクライアントに公開されるのを防ぐ
• SQLを使用して必要なデータのみをフェッチ
  • リクエストごとに転送されるデータ量と、インメモリでデータを変換するために必要なJavaScriptの量を削減 --> これかなり大事で、型定義にも影響する。
• JavaScriptでデータ・フェッチを並列化 Promise.all()
• ストリーミングを実装
  • 遅いデータ・リクエストがページ全体をブロックするのを防ぎ、ユーザーがすべての読み込みを待つことなくUIとのやりとりを開始できるように
• データ取得を必要なコンポーネントに移す
  • Partial Prerenderingに備えてルートのどの部分をダイナミックにすべきかを分離