Next.js 14 or 15 : force-dynamic の使い所

要約
ユーザー投稿型のサービスを開発する際、リアルタイム性が重要です。Next.js では、`dynamic = "force-dynamic"` もしくは `revalidate = 0` を使って、リアルタイムなデータを取得することができます。
意見はこのエリアに表示されます

dynamic = "force-dynamic" の使い所

Next.js 〜14 系で使う。

特徴

  • ページを動的レンダリング(SSR: Server-Side Rendering)に強制
  • キャッシュを無効化し、リクエストごとに新しいデータを取得
  • この設定を使うと、すべてのリクエストをサーバーで処理

メリットとデメリット

export const dynamic = "force-dynamic" を設定すると、SEO 強化と CSP ヘッダーを動的に設定するという利点がある。しかし、パフォーマンスの低下というデメリットもあるため、トラフィック量やサーバーリソースに応じて最適な設定を検討する必要がある。

src/app/layout.tsx に これを設定すると、そのレイアウトが適用されるすべてのページがサーバーサイドレンダリング(SSR)になる。つまり、全ページが動的にサーバーでレンダリングされ、各リクエストごとに最新のHTMLが生成される。

revalidate = 0

  • ページのキャッシュを無効に
  • サーバーサイドレンダリング(SSR)を強制し、リクエストごとに新しいデータを取得

結論

  • dynamic = "force-dynamic" を設定している場合、revalidate = 0 を書く必要はない
  • dynamic が優先されるため、revalidate の設定は無視される
  • Next.js 15 では、dynamic = "force-dynamic" を使う必要がほとんどない

Next.js 15 のキャッシュ仕様の変更

Next.js 15 では、dynamic = "force-dynamic" を使う必要がほとんどなくなった。

Next.js 15 でデフォルトでキャッシュが無効になっている理由は以下。

dynamic = "force-dynamic" が暗黙的に設定されているわけではなくて、以下のような設計変更によるもの。

非同期 API の強化によるデフォルトキャッシュの変更

  • Next.js 15 では、非同期 API(params, searchParams など)が Promise 化
  • これにより、リクエストごとにデータを取得する動的な挙動がデフォルトになった

非同期関数 (async) が自動的に動的レンダリングに切り替わる。例えば、ページやコンポーネント内で非同期データを取得する場合、明示的に dynamic = "force-dynamic" を指定しなくても動的レンダリングが適用される。

fetch のキャッシュ動作の変更

  • Next.js 14 以前: fetch のデフォルトはキャッシュが有効(force-cache)
  • Next.js 15: fetch のデフォルトはキャッシュ無効(no-store)

新しい開発者体験の設計

  • Next.js 15 では、「データの鮮度を明示的に管理する」という方向性に変更された
  • 開発者がキャッシュを利用する場合、明示的に cache: "force-cache"revalidate を指定する必要がある

完全に動的なページ

例 : 最新の投稿一覧やユーザーごとのダッシュボード。ルートの layout.tsx に以下を記述する。

設定例

ある程度キャッシュしたいページ

例: トップページや頻繁に更新されない情報。

部分的にキャッシュを使いたい場合

静的でよいページ

例: プライバシーポリシーや利用規約のような固定ページ。

なぜ dynamic = "force-dynamic" を選ぶのか?

  • 投稿型サービスの場合リアルタイム性が重要なため、動的レンダリングが必要。
  • 常に最新のデータを取得できる。
  • キャッシュが無効化されることで、投稿や更新が即時反映される。

注意点

  • サーバー負荷: 動的レンダリングは、トラフィックが増加すると負荷が高くなる。
  • データベース負荷: リクエストごとにデータを取得するため、効率的なクエリ設計が重要。
Explore More
関連記事はありません。