LESSON 11 · 約35分

キャッシュと更新を、セットで設計する

速さと新しさのバランスを、設定ごとに整理します。

コードを試す前に

基本演習はApp Router・JavaScript/JSX・Cache Components無効で進めます。11の有効化例は独立した発展実験です。01〜04は先に読んで、コードの実行は05の環境構築後に戻って試せます。

短い学習用の例です。各例は段階ごとの独立した例であり、全コードを一つのプロジェクトへ順に上書きして完成する形式ではありません。必要なファイル・依存関係・前提条件は注記に記載しています。

開発環境の準備を確認する →

このレッスンでわかること

Cache Componentsのオン・オフを見分けられる
何をいつ更新するか説明できる

最初に、手元の設定を確認する

Next.js 16でCache Componentsが導入されました。cacheComponents: trueを有効にしたガイドと、無効の構成向けガイドは分かれています。古い記事と新しいAPIをそのまま混ぜず、Next.jsのバージョンとnext.configを先に見ましょう。この教材の基本演習は無効で統一し、有効化する例は別の実験として比べます。

オン：use cacheと有効期間を明示する

use cacheで関数やコンポーネントの結果を再利用し、cacheLifeで期間の方針を示します。更新単位をcacheTagでまとめることもできます。個人情報や権限が絡むデータを、公開データと同じ扱いで共有キャッシュしないようにします。

オフ：fetchの設定や従来の再検証を読む

Cache Componentsを使わない現行ガイドでも、fetchは標準でキャッシュされません。必要な取得にforce-cacheやnext.revalidateなどを指定します。ただしデータのキャッシュ、ページ出力の事前生成、ブラウザー側の再利用は別の層です。

古くなった結果を、どう更新するか

時間経過で更新する方法と、保存後に明示的に更新する方法があります。revalidateTag(tag, "max")は古い内容を返しながら裏で更新する方式。更新直後に新しい値を見せたいServer ActionではupdateTagの用途も確認します。

Cache Componentsを有効にする

next.config.mjs

const nextConfig = {
  cacheComponents: true,
}

export default nextConfig

このレッスンのオン側の実験だけに必要です。既存の設定へ追加して開発サーバーを再起動します。実験後、他の基本演習へ戻る際はcacheComponents: falseに戻して再起動してください。オンのまま進める場合、動的paramsや未キャッシュ取得にもSuspense/loading等の対応が必要です。

オン側：公開記事のキャッシュ方針

app/lib/posts.js

import { cacheLife, cacheTag } from 'next/cache'

export async function getPosts() {
  'use cache'
  cacheLife('hours')
  cacheTag('public-posts')

  const response = await fetch('https://api.vercel.app/blog')
  if (!response.ok) throw new Error('記事を取得できませんでした')
  return response.json()
}

hoursはキャッシュの期間プロファイルです。「毎時ちょうどに必ず裏で更新される予約処理」という意味ではありません。

オフ側：取得ごとの再検証方針

app/lib/posts.js

export async function getPosts() {
  const response = await fetch('https://api.vercel.app/blog', {
    next: { revalidate: 3600 },
  })
  if (!response.ok) throw new Error('記事を取得できませんでした')
  return response.json()
}

Cache Components無効の構成向けの別案です。オン側のコードと同じファイルに併記して使いません。

TRY IT YOURSELF

データの鮮度を設計する

公開記事・在庫・自分のプロフィールを並べる
各データが何分古くてもよいか決める
更新直後の画面で何を見せるべきか書く

できたらOK：何をキャッシュし、いつ更新するかを理由つきで決められる

QUICK CHECK

理解を確かめよう

公式資料でもう少し詳しく

ここまで読めたら、ひとつ前進。