0Pricing
React Academy · Lesson

unstable_cache & React cache()

Cache expensive function results per-request or across requests with Next.js cache utilities.

Two Cache Utilities

Next.js provides two complementary caching utilities: unstable_cache for persistent cross-request caching, and React's cache() for per-request deduplication.

React cache() — Per-Request Dedup

cache(fn) from React memoizes a function's result for the duration of a single server render pass. Two Server Components calling the same cached function get the same result without a second DB/API call.

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

All lessons in this course

  1. fetch() with Cache Options in Next.js
  2. unstable_cache & React cache()
  3. Incremental Static Regeneration (ISR)
  4. Server Actions for Data Mutations
← Back to React Academy