● Next.js App Router の サーバーサイド fetch のキャッシュについて

該当するバージョンは nextjs@14です。

● A. Next.js の fetch 関数を使用している場合（キャッシュが自動で有効になる）

この例では 3600秒（1時間）サーバーサイドでキャッシュが有効になります。

page.tsx

/**
 * Route Segment Config
 */
export const revalidate = 3600

export default async function Page() {
  fetch('https://...')

● B. fetch 以外の関数でデータ取得している場合の cache について

unstable_cache を使ってキャッシュ関数を合成することで、キャッシュに対応できるようになります。

公式: https://nextjs.org/docs/app/api-reference/functions/unstable_cache

page.tsx

/**
 * Route Segment Config
 */
export const revalidate = 3600

/**
 * cached Function
 */
const getUserCached = unstable_cache(
  (id:string) => { return getUser(id) } // データ取得関数をここに
  [keyParts],
)

export default async function Page() {
  const user = getUserCached('xxxxxxxx')

● Next.js App Router の Route Segment Config について

Route Segment Configは以下のデフォルト値を持ちます。

export const dynamic = 'auto'
export const dynamicParams = true
export const revalidate = false
export const fetchCache = 'auto'
export const runtime = 'nodejs'
export const preferredRegion = 'auto'
export const maxDuration = 5

dynamic = 'force-static'の効果について

export const dynamic = 'force-static'を設定していると、仮にDynamic APIを使用していたとしても、それらは空の値として扱われ、ページは強制的に静的レンダリングされます。

Dynamic API の例

cookies()
headers()
searchParams

これらを使っているときにそのページは Dynamic になります。

● Next.js の ondemand ISR について

ondemand ISR を有効にするには

以下を追加して ondemand ISR を有効にする

export async function generateStaticParams() {
  return []; // 空の配列でも可
}

（ページが Dynamic なときにこれを指定するとエラーになります。）

または

export const dynamic = 'force-static';

検証方法

レスポンスヘッダに x-nextjs-cache があれば ISR です。