M

MLOG

日本語

Next.jsのunstable_cache APIを解説。動的アプリケーションのデータキャッシュをきめ細かく制御し、パフォーマンスとユーザーエクスペリエンスを向上させます。

Next.jsのunstable_cache: 動的アプリケーションのためのきめ細やかなキャッシュ制御

Next.jsはウェブ開発に革命をもたらし、パフォーマンスが高くスケーラブルなアプリケーションを構築するための強力な機能を提供しています。その中核的な強みの一つは堅牢なキャッシュメカニズムであり、これにより開発者はデータフェッチとレンダリングを最適化し、よりスムーズなユーザーエクスペリエンスを実現できます。Next.jsは様々なキャッシュ戦略を提供していますが、unstable_cache APIは新たなレベルのきめ細やかな制御を提供し、開発者が動的アプリケーションの特定のニーズに合わせてキャッシュの挙動を調整できるようにします。この記事ではunstable_cache APIを深く掘り下げ、その機能、利点、そして実用的な応用例を探ります。

Next.jsにおけるキャッシュの理解

unstable_cacheに飛び込む前に、Next.jsにおける様々なキャッシュ層を理解することが不可欠です。Next.jsはパフォーマンスを向上させるために、いくつかのキャッシュメカニズムを利用しています：

これらのキャッシュメカニズムは強力ですが、複雑で動的なアプリケーションに必要なレベルの制御を常に提供するとは限りません。ここでunstable_cacheが登場します。

`unstable_cache` APIの紹介

Next.jsのunstable_cache APIは、開発者が個々のデータフェッチ操作に対してカスタムのキャッシュ戦略を定義できるようにします。これにより、以下の項目をきめ細かく制御できます：

このAPIはまだ開発中であり、将来のNext.jsのバージョンで変更される可能性があるため、「unstable（不安定）」と見なされています。しかし、高度なキャッシュシナリオにおいて価値ある機能を提供します。

`unstable_cache`の仕組み

unstable_cache関数は、主に2つの引数を取ります：

  1. データをフェッチまたは計算する関数: この関数が実際のデータ取得や計算を実行します。
  2. オプションオブジェクト: TTL、タグ、キーなどのキャッシュオプションを指定するオブジェクトです。

以下にunstable_cacheの基本的な使用例を示します：

import { unstable_cache } from 'next/cache';

async function getData(id: string) {
  return unstable_cache(
    async () => {
      // APIからデータをフェッチするシミュレーション
      await new Promise((resolve) => setTimeout(resolve, 1000));
      const data = { id: id, value: `Data for ID ${id}` };
      return data;
    },
    ["data", id],
    { tags: ["data", `item:${id}`] }
  )();
}

export default async function Page({ params }: { params: { id: string } }) {
  const data = await getData(params.id);
  return 
{data.value}
;
}

この例では:

`unstable_cache`の主な機能とオプション

1. TTL (Time-to-Live)

revalidateオプション（初期の実験的バージョンではttl）は、キャッシュされたデータが有効と見なされる最大時間（秒単位）を指定します。この時間が経過すると、次のリクエストでキャッシュが再検証されます。

import { unstable_cache } from 'next/cache';

async function getData(id: string) {
  return unstable_cache(
    async () => {
      // APIからデータをフェッチするシミュレーション
      await new Promise((resolve) => setTimeout(resolve, 1000));
      const data = { id: id, value: `Data for ID ${id}` };
      return data;
    },
    ["data", id],
    { tags: ["data", `item:${id}`], revalidate: 60 } // 60秒間キャッシュ
  )();
}

この例では、データは60秒間キャッシュされます。60秒後、次のリクエストが再検証をトリガーし、APIから新しいデータをフェッチしてキャッシュを更新します。

全体的な考慮事項: TTL値を設定する際は、データの更新頻度を考慮してください。頻繁に変更されるデータには短いTTLが適しています。比較的静的なデータには、長いTTLを設定することでパフォーマンスを大幅に向上させることができます。

2. キャッシュタグ

キャッシュタグを使用すると、関連するキャッシュデータをグループ化し、まとめて無効化することができます。これは、あるデータの更新が他の関連データに影響する場合に便利です。

import { unstable_cache, revalidateTag } from 'next/cache';

async function getProduct(id: string) {
  return unstable_cache(
    async () => {
      // APIから製品データをフェッチするシミュレーション
      await new Promise((resolve) => setTimeout(resolve, 500));
      const product = { id: id, name: `Product ${id}`, price: Math.random() * 100 };
      return product;
    },
    ["product", id],
    { tags: ["products", `product:${id}`] }
  )();
}

async function getCategoryProducts(category: string) {
  return unstable_cache(
    async () => {
      // APIからカテゴリ別の製品をフェッチするシミュレーション
      await new Promise((resolve) => setTimeout(resolve, 500));
      const products = Array.from({ length: 3 }, (_, i) => ({ id: `${category}-${i}`, name: `Product ${category}-${i}`, price: Math.random() * 100 }));
      return products;
    },
    ["categoryProducts", category],
    { tags: ["products", `category:${category}`] }
  )();
}

// 全ての製品と特定の製品のキャッシュを無効化
async function updateProduct(id: string, newPrice: number) {
  // データベースで製品を更新するシミュレーション
  await new Promise((resolve) => setTimeout(resolve, 500));

  // 製品と製品カテゴリのキャッシュを無効化
  revalidateTag("products");
  revalidateTag(`product:${id}`);

  return { success: true };
}

この例では:

全体的な考慮事項: 意味のある一貫したタグ名を使用してください。データモデルに沿ったタグ付け戦略を作成することを検討してください。

3. キャッシュキーの生成

キャッシュキーは、キャッシュされたデータを識別するために使用されます。デフォルトでは、unstable_cacheは関数に渡された引数に基づいてキーを生成します。しかし、unstable_cacheの2番目の引数である配列を使用してキー生成プロセスをカスタマイズできます。この配列はキーとして機能し、配列内のいずれかのアイテムが変更されるとキャッシュは無効化されます。

import { unstable_cache } from 'next/cache';

async function getData(userId: string, sortBy: string) {
  return unstable_cache(
    async () => {
      // APIからデータをフェッチするシミュレーション
      await new Promise((resolve) => setTimeout(resolve, 1000));
      const data = { userId: userId, sortBy: sortBy, value: `Data for user ${userId}, sorted by ${sortBy}` };
      return data;
    },
    [userId, sortBy],
    { tags: ["user-data", `user:${userId}`] }
  )();
}

この例では、キャッシュキーはuserIdとsortByパラメータに基づいています。これにより、これらのパラメータのいずれかが変更されたときにキャッシュが無効化されることが保証されます。

全体的な考慮事項: キャッシュキー生成戦略が一貫しており、データに影響を与えるすべての関連要因を考慮していることを確認してください。複雑なデータ構造から一意のキーを作成するために、ハッシュ関数を使用することを検討してください。

4. 手動での再検証

revalidateTag関数を使用すると、特定のタグに関連付けられたデータのキャッシュを手動で無効化できます。これは、バックグラウンドジョブやWebhookなど、ユーザーのリクエストによって直接トリガーされないイベントに応答してキャッシュを更新する必要がある場合に便利です。

import { revalidateTag } from 'next/cache';

async function handleWebhook(payload: any) {
  // Webhookのペイロードを処理

  // 関連データのキャッシュを無効化
  revalidateTag("products");
  revalidateTag(`product:${payload.productId}`);
}

全体的な考慮事項: 手動での再検証は戦略的に使用してください。過剰な無効化はキャッシュの利点を打ち消す可能性があり、不十分な無効化は古いデータにつながる可能性があります。

`unstable_cache`の実用的なユースケース

1. 更新頻度の低い動的コンテンツ

（ブログ投稿やニュース記事など）あまり頻繁に変更されない動的コンテンツを持つウェブサイトでは、unstable_cacheを長いTTLと共に使用して、データを長期間キャッシュすることができます。これにより、バックエンドへの負荷が軽減され、ページの読み込み時間が短縮されます。

2. ユーザー固有のデータ

（ユーザープロファイルやショッピングカートなど）ユーザー固有のデータについては、ユーザーIDを含むキャッシュキーでunstable_cacheを使用できます。これにより、各ユーザーが自身のデータを表示でき、ユーザーのデータが変更されたときにキャッシュが無効化されることが保証されます。

3. 古いデータがある程度許容されるリアルタイムデータ

（株価やソーシャルメディアのフィードなど）リアルタイムデータを表示するアプリケーションでは、unstable_cacheを短いTTLと共に使用して、ほぼリアルタイムの更新を提供できます。これにより、最新データへの要求とキャッシュのパフォーマンス上の利点とのバランスを取ることができます。

4. A/Bテスト

A/Bテスト中は、一貫したエクスペリエンスを保証するために、ユーザーに割り当てられた実験バリアントをキャッシュすることが重要です。unstable_cacheを使用して、ユーザーIDをキャッシュキーの一部として使用し、選択されたバリアントをキャッシュすることができます。

`unstable_cache`を使用するメリット

考慮事項とベストプラクティス

`unstable_cache`と`fetch` APIキャッシングの比較

Next.jsは、fetch APIを通じても組み込みのキャッシュ機能を提供しています。デフォルトでは、Next.jsはfetchリクエストの結果を自動的にキャッシュします。しかし、unstable_cacheはfetch APIのキャッシングよりも柔軟性と制御性が高いです。

以下に、2つのアプローチの比較を示します：

機能 `unstable_cache` `fetch` API
TTLの制御 revalidateオプションで明示的に設定可能。 Next.jsによって暗黙的に管理されるが、fetchオプションのrevalidateオプションで影響を与えることが可能。
キャッシュタグ 関連データを無効化するためのキャッシュタグをサポート。 キャッシュタグの組み込みサポートなし。
キャッシュキーのカスタマイズ キーを構築するために使用される値の配列でキャッシュキーをカスタマイズ可能。 カスタマイズオプションは限定的。キーはfetchのURLから派生。
手動での再検証 revalidateTagによる手動再検証をサポート。 手動再検証のサポートは限定的。
キャッシュの粒度 個々のデータフェッチ操作のキャッシュが可能。 主にHTTPレスポンスのキャッシュに焦点を当てている。

一般的に、デフォルトのキャッシュ挙動で十分な単純なデータフェッチシナリオではfetch APIのキャッシングを使用します。キャッシュの挙動をきめ細かく制御する必要がある、より複雑なシナリオではunstable_cacheを使用します。

Next.jsにおけるキャッシングの未来

unstable_cache APIは、Next.jsのキャッシング能力における重要な一歩を表しています。APIが進化するにつれて、データキャッシングの管理において、さらに強力な機能とより大きな柔軟性が期待できます。高性能でスケーラブルなアプリケーションを構築するためには、Next.jsのキャッシングに関する最新の動向に追随することが不可欠です。

結論

Next.jsのunstable_cache APIは、開発者にデータキャッシングに対する前例のない制御を提供し、動的アプリケーションのパフォーマンスとユーザーエクスペリエンスを最適化することを可能にします。unstable_cacheの機能と利点を理解することで、その力を活用して、より速く、よりスケーラブルで、より応答性の高いウェブアプリケーションを構築できます。最適な結果を確実にするために、キャッシュ戦略を慎重に検討し、適切なTTL値を選択し、キャッシュキーを効果的に設計し、キャッシュのパフォーマンスを監視することを忘れないでください。Next.jsにおけるキャッシングの未来を受け入れ、ウェブアプリケーションの可能性を最大限に引き出しましょう。