Next.jsでストリーミングとPPRを実装する方法

TL;DR

Next.jsでは、動的なサーバーコンポーネントをSuspenseで囲み、fallbackにスケルトンUIを指定すると、取得できたデータから段階的に表示できる。ページ単位ならloading.tsxを使い、PPRではSuspense境界の外を静的、内側を動的な領域として構成する。

Transcript

はいどうもしですえ今回はですね ストリーミングとローディングUIそして パティアプリレンダリングPPRと言われ ているえレンダリング方式について解説し ていこうと思いますまストリーミンググっ てどういうことかって言うとまちょっと これリロードしてみますねこれダッシュ ボードが今え作ったものあるんですけども これリロードするとデータが用意できた ものから順次データを表示していくって いうやり方ですねまこれストリーミングっ ていう風に言うんですけどもえこの実装 方法とまどういったケースで利用するのか そしてえ最後にパーチアルプリ レンダリングについてもえ言及していこう と思いますでパーティアルプリ レンダリングについては段階的に導入段階 なんですけどもえバージョンが上がること にこれが安定版にな... Read More

Key Insights

• 通常の一括レンダリングは、最も遅いデータ取得が完了するまで、静的なサイドバーを含むページ全体の表示を待たせる構成である。
• ストリーミングは、取得が完了したデータから順次コンテンツを表示し、すぐに提供できる静的部分を先に見せるレンダリング方法である。
• Suspenseは、子要素の読み込みが完了するまでfallbackを表示し、動的なサーバーコンポーネントの表示境界を定義する仕組みである。
• 個別のSuspense境界は、各カードを独立して読み込ませるため、1秒、2秒、3秒、4秒という例のように準備できた順で表示できる。
• 複数の動的コンポーネントを一つのSuspenseで囲む構成は、最も遅いデータの取得後に境界内の内容をまとめて表示する動作になる。
• スケルトンUIは、データ取得中の空白を仮の画面構造で置き換え、どの領域が読み込み中なのかを利用者に伝える手段である。
• loading.tsxは、同じルートセグメントのページを自動的にSuspenseで囲み、ファイル内の表示をページ単位のfallbackとして利用する規約である。
• PPRは、一つのページ内でSuspense境界の外側を静的領域、内側を動的領域として分け、事前表示と段階的なデータ表示を組み合わせる方式である。
• 🎬 このチャンネルの他の動画:
  • 個人開発に役立つClaude Codeスキル5選
  • Gemini 3 Proで高品質なWebサイトを作る方法
  • Next.js 16でuse cacheを使う方法
• 📺 このチャンネル: プログラミングチュートリアル

Questions & Answers

Q: Next.jsでストリーミングを実装する方法は？

動的なサーバーコンポーネントをReactのSuspenseで囲み、fallbackに読み込み中の表示を指定します。各コンポーネントを別々のSuspenseで囲めば、データ取得が完了したものから順次表示されます。動画の例では、待ち時間が異なる4枚のカードが段階的に表示されました。

Q: Next.jsのストリーミングとは何ですか？

ストリーミングとは、ページに必要な全データがそろうまで待つのではなく、提供できる静的部分や取得済みのデータから順番に表示する方法です。動画では、サイドバーやヘッダーを先に表示し、ユーザーごとに変わるダッシュボードのカードを後から表示しています。

Q: Suspenseのfallbackには何を指定できますか？

fallbackには、読み込み完了まで一時的に表示する文字列や静的コンポーネントを指定できます。単純な「ローディング」という文字列も使えますが、動画では画面の形を保ちながら待機状態を示すカード型のスケルトンUIを配置し、空白だけになる状態を避けています。

Q: Suspense境界を細かく分けるメリットは何ですか？

Suspense境界を細かく分けるメリットは、各コンポーネントを独立して表示できることです。動画の例では、1秒から4秒まで取得時間が異なるカードを個別に囲むことで、準備できたカードから表示されます。一つの境界でまとめると、最も遅いカードが終わるまで全カードが待機します。

Q: loading.tsxでローディングUIを実装する方法は？

対象となるルートセグメントにloading.tsxを作成し、その中へスケルトンなどの読み込み表示を記述します。動画の説明では、同じセグメントのページが自動的にSuspenseで囲まれ、loading.tsxの内容がfallbackとして使われます。ページ全体を一つの単位で待機させたい場合に適しています。

Q: Suspenseとloading.tsxはどう使い分けますか？

コンポーネントごとに段階的な表示を行う場合はSuspenseを個別に配置し、ページ全体に共通する待機画面を出す場合はloading.tsxを使います。動画では、両方を同時に設定した構成では個別のSuspenseによる表示が優先され、カードが一つずつ表示されると説明されています。

Q: Next.jsのPPRとは何ですか？

PPRはPartial Pre Renderingの略で、一つのページ内に静的な領域と動的な領域を共存させるレンダリング方式です。動画では、Suspense境界の外側にあるサイドバーやヘッダーを静的部分、境界内でデータを取得するカードを動的部分として扱う考え方が示されています。

Q: PPRを有効にする方法は？

動画で扱われた時点では、next.config.mjsで実験的なPPRのインクリメンタル設定を有効にし、対象となるダッシュボードのルートにもPPRを有効化するセグメント設定を追加しています。通常版では利用できず、紹介された検証ではNext.js 15のカナリア版へ変更してビルドしています。

Q: PPRの動作を確認する際の注意点は何ですか？

PPRの挙動や性能は、開発環境だけでは実感しにくいため、本番相当のビルドで確認する必要があります。動画の検証では、静的レンダリングされたページでは取得済みの状態が事前生成されてスケルトンを確認できず、ページを強制的に動的へ変更して再ビルドしています。

Summary & Key Takeaways

• 通常のレンダリングでは、最も時間のかかるデータ取得が終わるまでページ全体が表示されないことがある。例示されたダッシュボードでは各カードに1秒から4秒の待ち時間があり、静的なサイドバーやヘッダーまで待たされるため、初期表示の体験が悪化する。

• コンポーネント単位のストリーミングは、動的なサーバーコンポーネントを個別のSuspenseで囲み、fallbackに文字列やスケルトンUIを指定して実装する。境界を細かく分ければ準備できたカードから順番に表示でき、まとめて囲めば最も遅い処理の完了後に一括表示される。

• ページ単位のローディングUIには、対象ルートセグメントへloading.tsxを配置する。PPRはSuspense境界の外側を静的領域、内側を動的領域として扱う考え方で、紹介時点では実験的設定とルート別の有効化が必要だった。実際の効果は本番相当のビルドで確認する必要がある。