0Pricing
React Academy · レッスン

unstable_cacheとReact cache()

Next.jsのcache utilitiesで、負荷の高い関数の結果をリクエスト単位またはリクエスト間でキャッシュします。

「unstable_cacheとReact cache()」はCoddyKit上の無料React Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

2つのキャッシュユーティリティ

Next.jsには、互いに補完する2つのキャッシュユーティリティがあります。unstable_cacheはリクエストをまたぐ永続的なキャッシュに、Reactのcache()はリクエスト単位の重複排除に使用します。

Reactのcache() — リクエスト単位の重複排除

Reactのcache(fn)は、1回のサーバーレンダリングパスの間、関数の結果をメモ化します。同じキャッシュ済み関数を呼び出す2つのServer Componentsは、2回目のDB/API呼び出しを行わずに同じ結果を受け取ります。

import { cache } from 'react';

export const getUser = cache(async (id: string) => {
  return db.user.findUnique({ where: { id } });
});

// Both components call getUser(id) — only one DB query fires per request
// component A: const user = await getUser('1');
// component B: const user = await getUser('1'); // uses cached result

unstable_cache — 永続キャッシュ

unstable_cache(fn, keyParts, options)は、明示的に再検証されるまで、リクエスト間で結果を永続化します。fetch({ next: { revalidate } })を、任意の非同期関数（DBクエリやRedis呼び出しなど）に適用したものと考えるとよいでしょう。

import { unstable_cache } from 'next/cache';

const getProducts = unstable_cache(
  async () => db.products.findMany(),
  ['products-list'],      // cache key parts
  { revalidate: 60, tags: ['products'] } // options
);

// In a Server Component:
const products = await getProducts();

キャッシュキーの構成要素

unstable_cacheの2番目の引数は、キャッシュキーを構成する文字列の配列です。出力に影響するすべての変数を含めてください。

const getUserPosts = unstable_cache(
  async (userId: string) => db.posts.findMany({ where: { userId } }),
  ['user-posts'],         // base key
  { tags: [`user-${userId}-posts`] } // per-user tag
);

// Call with userId — Next.js appends the argument to the key:
const posts = await getUserPosts(userId);

オンデマンド再検証用のタグ

キャッシュされた関数にタグを付け、データが変更されたとき（たとえばServer Actionでミューテーションを実行した後）にrevalidateTag()で無効化します。

// Server Action
async function createProduct(data: FormData) {
  'use server';
  await db.products.create({ data: parseFormData(data) });
  revalidateTag('products'); // invalidates all cached functions tagged 'products'
  redirect('/products');
}

時間ベースの再検証

オプションにrevalidate: Nを設定すると、fetch呼び出しに対するISRと同様に、N秒後にキャッシュを再検証できます。

const getStats = unstable_cache(
  async () => computeHeavyStats(),
  ['dashboard-stats'],
  { revalidate: 300 } // recompute at most every 5 minutes
);

cache()とunstable_cacheの組み合わせ

1回のレンダーで複数の場所から呼び出される関数には、unstable_cacheの内部でcache()を使用します。これにより、リクエスト内では重複排除し、リクエスト間では結果を永続化できます。

// Deduplicate the DB call within a request:
export const getRawUser = cache(async (id: string) => db.user.findUnique({ where: { id } }));

// And cache the result persistently:
export const getUser = unstable_cache(getRawUser, ['user'], { revalidate: 60, tags: ['user'] });

unstable_cacheの制限

unstable_cacheは、安定版になる前にAPIが変更される可能性があるため、unstableとマークされています。キャッシュされた関数から、cookieやheaderなどのリクエスト固有のデータにアクセスすることはできません。

レイアウトデータ用のReact cache()

レイアウトレベルのデータ取得をcache()でラップすると、レイアウトと、同じ関数を呼び出すネストされたページが、1回のレンダー中に結果を共有できます。

// lib/data.ts
export const getCurrentUser = cache(async () => {
  const session = await getServerSession();
  return db.user.findUnique({ where: { id: session?.userId } });
});

// layout.tsx and page.tsx both call getCurrentUser() — one DB query

使い分け

cache()：同一のレンダー（同じリクエスト）内で、同一の呼び出しを重複排除します。unstable_cache：再検証されるまで、複数のリクエストにわたって結果を永続化します。外部HTTP APIを呼び出す場合は、fetchとnext.revalidateを使用してください。

理解度チェック

Reactのcache()とNext.jsのunstable_cacheの主な違いは何ですか。

まとめ

cache(fn)は1回のレンダーパス内で呼び出しを重複排除するため、レイアウトとページで共有するデータに適しています。unstable_cache(fn, keys, { revalidate, tags })は、時間ベースまたはタグベースの無効化を伴ってリクエスト間で結果を永続化するため、高コストなDBクエリに適しています。

よくある質問

「unstable_cacheとReact cache()」レッスンは無料ですか？

はい。「unstable_cacheとReact cache()」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「unstable_cacheとReact cache()」で何を学びますか？

Next.jsのcache utilitiesで、負荷の高い関数の結果をリクエスト単位またはリクエスト間でキャッシュします。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「unstable_cacheとReact cache()」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Next.jsのCache Options付きfetch()
  2. unstable_cacheとReact cache()
  3. Incremental Static Regeneration（ISR）
  4. データMutationのためのServer Actions
← React Academyに戻る