ページの隅にログインユーザー名を出したいだけです。そのために全体を動的にするのは避けたい。どうしますか。
Cache Components が有効なら、ユーザー名の部分を切り出して Suspense で包めば残りは静的に保てます。従来の設定では包んでもルート全体が動的のままなので、まず設定を確認します。
面接官が見ているのはSuspense で境界を作る発想があるか。
これは「あるページだけビルド時に生成されず、毎リクエスト実行されていました。原因として何を疑いますか。」への追撃質問です。
よくある答えと、面談でどう見られるか
- その部分だけコンポーネントに切り出し、Suspense で包む
Cache Components を有効にしているなら、公式が示している手そのものです。残りは静的なシェルとして先に返せます。従来の設定のままだと、包んでもルート全体は動的のままなので、まず next.config を確認します。 - ユーザー名だけクライアント側から API で取りに行く
成立しますし、実際よく使われます。Cache Components を使っていない従来の設定では、全体を静的に保つ現実的な手はむしろこちらです。ただし往復が1回増え、認証情報の扱いを別途考える必要があります。 - ページ全体を動的にしたうえで、キャッシュで速度を補う
個人向けの内容を含むページをキャッシュするのは危険です。共有キャッシュに個人情報が入ると、他人のデータが見える事故になります。 - layout でユーザー名を読む。page ではないので影響が出ない
layout で読んでも同じです。むしろ配下の全ページに効くので影響は広がります。
面接官は何を見ているか
- 該当部分だけコンポーネントに切り出すと答えた
- Suspense で包む、と言えた
- 残りは静的に保てると説明できた
模範解答
答えは設定で変わります。最初に next.config で cacheComponents を確認します。
Cache Components（next.config の cacheComponents: true。16.4 で新規作成したアプリでは既定で有効）が有効なら、ユーザー名を出す部分だけを別コンポーネントに切り出し、Suspense で包みます。公式の手順そのもので、読み取りを Suspense の中に移すと、残りは静的なシェルとしてプリレンダーされ、動的な部分だけがリクエスト時にストリーミングされます。
従来の設定のままだと、この手は効きません。公式も「Cache Components なしでは cookies() などを読むとルート全体が動的になる」と書いています。Suspense で包んでも表示が段階的になるだけで、ルートは動的のままです。この場合に全体を静的に保つ現実的な手は、ユーザー名だけをクライアント側から取りに行くことです。
考え方としては「ページ単位の全か無か」から「範囲を区切る」への移行です。ユーザー名の枠だけプレースホルダで出して、後から差し替わる形になります。
なお useSearchParams を使う Client Component も同様にSuspense 境界が必要です。検索パラメータもリクエスト時にしか分からないためです。
対象: Next.js 16（App Router） 照合した一次資料: 公式ドキュメント 照合: 2026-10-25 最終更新: 2026-10-25
お使いの版で挙動が違う場合があります。誤りに気づいたらこの解説を報告するから教えてください。
ここからどう深掘りされるか
この問いに答えられた場合、面談は次の質問に進みます。