OpenAINext.jsJan 3, 2025, 2:00 PM

Composable Caching with Next.js

A condensed section focused on the key takeaways first.

Original Post

Quick Digest

Summary

A condensed section focused on the key takeaways first.

openaienmodel: gpt-5-mini-2025-08-07

Composable Caching with Next.js

Key Points

  • Compiler-derived cache keys include closure dependencies
  • Non-serializable values become runtime references
  • Supports tagging and targeted invalidation

Summary

'use cache' is a compiler directive in Next.js that marks functions or components as cacheable. The Next.js compiler statically analyzes closures to produce reliable cache keys (including captured values), serializes supported inputs via React serialization, and represents non-serializable inputs as runtime references so inner dynamic children or complex objects do not invalidate cached outputs. The feature supports tagging, custom cacheLife() profiles, and targeted invalidation via cacheTag() / revalidateTag(). It is experimental.

Key Points

  • Compiler-driven cache keys: the directive lets the compiler include closure dependencies automatically, avoiding manual key mistakes common with runtime cache() functions.
  • Serializable vs non-serializable: serializable arguments are used in the cache key; non-serializable values become runtime references that are restored when the cached result is deserialized.
  • Composable (donut) caching: children can remain dynamic references so updating child components doesn't invalidate the outer cached result.
  • Tagging & invalidation: use cacheTag() to tag entries, revalidateTag() to invalidate, and cacheLife() to set cache profiles (defaults provided, custom allowed).
  • Practical guidance: prefer "'use cache'" for local, safe caching; ensure deterministic serializable inputs for keys; tag after fetching when you want targeted revalidation.
  • Status: experimental — test and provide feedback; consult the docs for exact API and migration notes.

Full Translation

Translations

A translation section that keeps the flow of the original article.

openaijamodel: gpt-5-mini-2025-08-07

Next.js におけるコンポーザブルキャッシング

概要

use cache の API 設計と利点について詳しく学びます。Next.js におけるコンポーザブルキャッシングの考え方、導入に伴うメリット、実装時の注意点を把握できます。

学べる内容

  • API デザイン: use cache がどのように設計され、どんなシグネチャや動作を持つか。
  • 利点: パフォーマンス改善、再利用性、組み合わせ可能なキャッシュ戦略など。
  • 使い方: Next.js アプリケーション内での基本的な使用例とベストプラクティス。
  • 注意点: キャッシュの無効化や一貫性、サーバー/クライアント間の振る舞いの違い。

次のステップ

公式ドキュメントやリファレンスを参照して、use cache の具体的な API と実装例を確認してください。サンプルコードを試し、アプリケーションの要件に合わせてキャッシュ戦略を調整しましょう。