久しぶりに触るNext.js: Static vs Dynamic Rendering
The Road to Next.jsを受講して、Next.jsについて学ぶ中で、特にdynamicやrevalidateのような設定がアプリケーションのパフォーマンスと柔軟性にどのように影響を与えるかに注目しました。これらの機能を活用することで、リアルタイムデータの取得やリソース消費の最適化が可能となり、スムーズなユーザー体験を提供できます。
この記事では、具体例を交えながら、dynamicとrevalidateの基本的な使い方と注意点について解説します。
Static Rendering (静的レンダリング) とは
Static Renderingでは、ページはビルド時に生成され、静的HTMLとして配信されます。この方式は以下のような場合に最適です。
- コンテンツが頻繁に変更されない
- 初期読み込みが高速である必要がある
- サーバー負荷を最小限にしたい
利点:
- 高速なロード時間
- CDNを活用したキャッシュ
欠点:
- 更新頻度が高いコンテンツには適さない
Next.jsのApp Routerでは、特定のセグメントで静的生成をデフォルトにする場合、特に設定を追加する必要はありません。
Dynamic Rendering (動的レンダリング) とは
Dynamic Renderingでは、リクエストごとにサーバーがページを生成します。この方式は以下のような場合に最適です。
- データが頻繁に更新される
- ユーザーごとにカスタマイズされたコンテンツを表示する必要がある
- リアルタイム性が重要
利点:
- 最新データの提供
- ユーザー体験のカスタマイズ
欠点:
- サーバー負荷が高い
- 初期ロード時間が遅くなる可能性がある
dynamic
とrevalidate
動的制御の例: Next.jsでは、dynamic
とrevalidate
を使って動的な挙動を細かく制御できます。
export const dynamic = "force-dynamic"
dynamic
オプションを使うと、特定のページやセグメントで動的レンダリングを強制できます。
例:
export const dynamic = "force-dynamic";
この設定を追加すると、ページはリクエストごとにサーバーサイドで生成され、静的キャッシュは使用されなくなります。
export const revalidate = 30
revalidate
を使用すると、ISR(Incremental Static Regeneration)を設定できます。この例では、30秒ごとにページが再生成されます。
export const revalidate = 30;
このオプションを利用することで、静的なパフォーマンスを保ちながら、最新データの提供が可能になります。
revalidatePath("/blog")
revalidatePath
は特定のパスのキャッシュを手動で無効化するために使用します。例えば、ブログ投稿情報を更新するAPI内で以下のように記述します:
import { revalidatePath } from 'next/cache';
export async function action() {
revalidatePath("/blog");
}
この関数をサーバーアクション内で呼び出すことで、/blog
ページが更新されたデータを元に再生成されます。
StaticとDynamicの選択基準
どちらを使うべきかはプロジェクトの要件次第です。
- Static Rendering: 更新頻度が低く、パフォーマンスを優先する場合
- Dynamic Rendering: リアルタイム性が重要な場合
- ISR: 両者の利点を組み合わせたい場合
結論
Next.jsのStatic RenderingとDynamic Renderingは、それぞれ異なるユースケースに対応した柔軟な選択肢を提供します。さらに、dynamic
やrevalidate
を活用することで、要件に合わせた最適なレンダリング戦略を実現できます。
今回の例のコードは、Dynamic RenderingとISRの両方を組み合わせた強力な方法を示しています。このアプローチを理解し、適切に使い分けることで、パフォーマンスと柔軟性を兼ね備えたWebアプリケーションを構築できるでしょう。
Discussion