📑

久しぶりに触るNext.js: Static vs Dynamic Rendering

2025/01/20に公開

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では、リクエストごとにサーバーがページを生成します。この方式は以下のような場合に最適です。

  • データが頻繁に更新される
  • ユーザーごとにカスタマイズされたコンテンツを表示する必要がある
  • リアルタイム性が重要

利点:

  • 最新データの提供
  • ユーザー体験のカスタマイズ

欠点:

  • サーバー負荷が高い
  • 初期ロード時間が遅くなる可能性がある

動的制御の例: dynamicrevalidate

Next.jsでは、dynamicrevalidateを使って動的な挙動を細かく制御できます。

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は、それぞれ異なるユースケースに対応した柔軟な選択肢を提供します。さらに、dynamicrevalidateを活用することで、要件に合わせた最適なレンダリング戦略を実現できます。

今回の例のコードは、Dynamic RenderingとISRの両方を組み合わせた強力な方法を示しています。このアプローチを理解し、適切に使い分けることで、パフォーマンスと柔軟性を兼ね備えたWebアプリケーションを構築できるでしょう。

Discussion