テック技報最新号へ →
コード

Next.js 16.4: ensureStatic で静的レスポンスを保証し、navigation() でプリフェッチ対象を絞る

16.4 の新API。ensureStatic は「このルートは静的に返るべき」と宣言して意図しないリクエスト時レンダリングを防ぎ、navigation() はプリフェッチ時に重い二次的UIを描画対象から外して、実際の遷移時まで遅らせる。

@nextjs · 投稿 2026-10-07
#nextjs#パフォーマンス#prefetch#静的レンダリング

どんな問題を解決する？

  • 何気なく cookies() や動的データを触ったせいで、静的だったはずのページが毎リクエストでレンダリングされる事故
  • プリフェッチでページ全体（重いおすすめ欄・コメント等）まで先読みしてしまい、無駄な負荷がかかる

使い方のイメージ

  • ensureStatic: 静的であるべきルートに付けておく → 初回ロード・<Link> による明示的プリフェッチ・遷移時のフルレンダリングのいずれでも静的レスポンスになることが保証される（動的になってしまう場合に検知できる）
  • navigation(): プリフェッチ時は「最も意味のあるUI」だけ事前レンダリングし、高コストな二次コンテンツはユーザーが実際に遷移したときに描画する
  • あわせて 16.4 から Cache Components が新規アプリでデフォルト有効（create-next-app）

注意点

  • 具体的なインポート元・関数シグネチャは公式ドキュメント（Next.js 16.4 リリースノート）で確認してから使うこと（本メモはXの告知ベース）。
  • Cache Components 前提の機能もあるので、既存アプリでは移行計画とセットで検討。

出典

X の元の投稿を開く