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
関連記事はありません。
Trends