Static Rendering(静的レンダリング)

Static RenderingはNext.jsにおけるデフォルトのサーバーレンダリング方法です。

この場合、データはビルド時かリバリデート後にレンダリングされ、キャシュに保存されます。データベースを参照することなく、キャッシュされたデータを参照するのでサイトへのアクセスが高速になり、サーバー負荷の軽減にも繋がります。

しかし、ビルド時かリバリデート後でなければデータが反映されないため、頻繁に更新されるコンテンツには推奨されていません。

データのないUIや、更新の少ないドキュメントなどで利用するのが良さそうです。

Dynamic Rendering(動的レンダリング)

Dynamic Renderingでは、ユーザーそれぞれのリクエスト時にレンダリングされます。

この場合、頻繁に更新されるデータをリアルタイムで取得できる他、ユーザーのアクションに基づいたデータの更新やCookie・URLパラメータなどのリクエスト時にのみ知ることのできる情報にアクセスできます。

Static Renderingはデフォルトなので特に設定は必要ありませんがDynamic Renderingでは設定が必要です。

この方法はNext.js14では試験的なAPIですが、後述のexport const dynamic = 'force-dynamic'と違い、コンポーネントごとに設定できるので推奨されています。

また、この方法はfetchにcache: 'no-store'を渡すのと同等の働きをします。

Component.ts

import { unstable_noStore as noStore } from 'next/cache';

export default function Component() {
    noStore();
    ...
}

unstable_noStoreは試験的なAPIなので、より安定したAPIを使用したい場合はこちらも選択肢になります。

Component.ts

export const dynamic = 'force-dynamic'

export default function Component() {}

これらはページ内をどちらかで統一しなければならない訳では無く、コンポーネントごとに設定し組み合わせることができます。

組み合わせた場合、ページは読み込みが遅い方に合わせて表示するため、ストリーミング機能を使ってユーザー体験を向上させる必要があります。