Next.js v15.3.5時点でのApp RouterにおけるSSRについての学習メモです。

Dynamic Rendering

Dynamic Renderingとはリクエストごとにサーバー側で生成を行う方式である。 App Routerにおいて、Server Side Renderingという用語は公式ドキュメント上使われておらず、Dynamic Renderingと呼ばれている。 このDynamic Renderingを実現するには以下の方法がある。

force-dynamicを設定する

Route Segment Configで明示的にforce-dynamicを設定することでDynamic Renderingを使用することができる。これを設定することで以下の構成となる。

• 設定したパス配下のfetchの全てを{ cache: 'no-store', next: { revalidate: 0 } }に設定される

• Route Segment ConfigのfetchCacheをforce-no-storeに設定

Route Segment Config #dynamic

export const dynamic = 'force-dynamic';

export default async function AboutPage() {
  // ~~~~~~~~~~~省略~~~~~~~~~~~~~
}

Dynamic APIを使う

cookies()やheaders()を使うことで自動的にDynamic Renderingとなる。

Partial Prerendering #Dynamic Rendering

import { cookies } from 'next/headers'
export default async function Page() {
  // cookiesを使用しているのでforce-dynamic'を設定しなくてもDynamic Renderingとして扱われる
  const cookieStore = await cookies()
  const theme = cookieStore.get('theme')
  return '...'
}

Tips💡 : 子コンポーネントでDynamic APIを使用するとページ全体がDynamic Renderingになる

fetchのcacheオプションでno-storeを設定する

fetchのcacheオプションで以下のようにno-storeを設定することでキャッシュを行わず、Dynamic Renderingが適用される。

fetch #options.cache

export default async function AboutPage() {
  const news = await fetch('https://api.example.com/news', {
    cache: 'no-store'  // Dynamic Renderingになる
  }).then(res => res.json());
  return '...'
}

Tips💡 : 子コンポーネントでno-storeを使用するとページ全体がDynamic Renderingになる