Next.js 15 Fullstack (App Router + Server Actions) · 课时

四种缓存：请求、数据、完整路由与路由器

梳理各缓存层之间的交互，以及 App Router 应用中的过期数据从何而来。

四种缓存：请求、数据、完整路由与路由器 是 CoddyKit 上的免费 Next.js 15 Fullstack (App Router + Server Actions) 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Next.js 15 Fullstack (App Router + Server Actions) 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Next.js 15 Fullstack (App Router + Server Actions) 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

Four Caches, One Mental Model

Next.js 15 App Router has four distinct caching layers. Stale data almost always comes from one of them, so naming them precisely is the first step to debugging.

Request Memoization — dedupes identical fetch calls within a single render pass.
Data Cache — persists fetch results across requests and deployments (server-side, durable).
Full Route Cache — stores the rendered HTML + RSC payload of statically-rendered routes at build time.
Router Cache — an in-memory client-side cache of RSC payloads for visited routes.

They flow roughly client → server: Router Cache lives in the browser; the other three live on the server.

Layer 1: Request Memoization

Request Memoization is React's built-in deduplication of fetch during a single server render. If three components request the same URL with the same options, the network call fires once; the rest reuse the in-flight promise.

Scope: a single render pass (one request). It is not shared across requests.
Key: the fetch URL + options.
Benefit: you can call getUser() in the layout and the page without prop-drilling or refetching.

Only fetch is memoized automatically. For non-fetch work (DB clients, ORMs), wrap it in React's cache().

import { cache } from 'react';
import { db } from '@/lib/db';

// Without fetch, memoize manually so layout + page share one query
export const getUser = cache(async (id: string) => {
  return db.user.findUnique({ where: { id } });
});

// Both calls in the same render hit the DB only once
async function Layout({ id }: { id: string }) {
  const user = await getUser(id);
  return user.name;
}

Memoization Is Per-Render, Not Durable

A common misconception: people think Request Memoization persists data. It does not. The moment the render finishes, the memo cache is discarded.

It exists only to avoid duplicate work within one render tree.
The next incoming request starts with an empty memo cache.
Durability across requests is the job of the Data Cache, not memoization.

So if you see fresh data on request A but the same render reuses it, that's memoization. If data survives a server restart, that's the Data Cache.

Layer 2: The Data Cache

The Data Cache persists fetch results on the server across requests, users, and even deployments (until revalidated). In Next.js 15 the default changed: fetch is now uncached (no-store) unless you opt in.

cache: 'force-cache' → store and reuse the result.
next: { revalidate: N } → store, serve stale up to N seconds, then refresh.
cache: 'no-store' → never store; always hit the source.

This is the layer most responsible for “why is my data stale?” when you forgot it's cached.

// Next.js 15: opt INTO the Data Cache explicitly
async function getProducts() {
  // Revalidate at most every 60s (ISR-style)
  const res = await fetch('https://api.shop.com/products', {
    next: { revalidate: 60 },
  });
  return res.json();
}

async function getCart() {
  // Per-user, never cache
  const res = await fetch('https://api.shop.com/cart', {
    cache: 'no-store',
  });
  return res.json();
}

Tagging and Targeted Revalidation

The Data Cache supports cache tags so you can invalidate exactly the entries tied to a piece of data — ideal after a Server Action mutates the database.

Attach tags at fetch time: next: { tags: ['products'] }.
Invalidate by tag with revalidateTag('products').
Invalidate by path with revalidatePath('/products').

Both functions run on the server (Server Action or Route Handler) and purge the Data Cache and the affected Full Route Cache entries.

'use server';
import { revalidateTag } from 'next/cache';
import { db } from '@/lib/db';

export async function createProduct(formData: FormData) {
  await db.product.create({
    data: { name: String(formData.get('name')) },
  });
  // Purge every fetch tagged 'products' → next read is fresh
  revalidateTag('products');
}

Layer 3: The Full Route Cache

The Full Route Cache stores the fully rendered output of a route — both the HTML and the React Server Component (RSC) payload — on the server at build time. It only applies to statically rendered routes.

A route is static unless it uses dynamic APIs (cookies(), headers(), searchParams) or an uncached fetch.
Static routes are served instantly from this cache with no re-render.
Dynamic routes skip the Full Route Cache and render on every request.

Think of it as the rendered-output sibling of the Data Cache, which holds raw fetch data.

Static vs Dynamic: What Triggers Each

Whether a route lands in the Full Route Cache depends on what it touches during render. Reading a dynamic API opts the whole route into dynamic rendering.

Using cookies(), headers(), draftMode(), or searchParams → dynamic.
A fetch with cache: 'no-store' → dynamic.
Exporting export const dynamic = 'force-dynamic' → dynamic, always.

You can force the other direction with export const dynamic = 'force-static' to keep a route cached.

// This page becomes DYNAMIC because it reads cookies()
import { cookies } from 'next/headers';

export default async function Dashboard() {
  const store = await cookies(); // Next.js 15: cookies() is async
  const theme = store.get('theme')?.value ?? 'light';

  // Full Route Cache is skipped; rendered fresh per request
  return <main data-theme={theme}>Welcome back</main>;
}

Layer 4: The Router Cache (Client)

The Router Cache is an in-memory, client-side store of RSC payloads for routes the user has visited or prefetched. It makes back/forward navigation instant and avoids refetching on soft navigations.

It lives in the browser and is cleared on a full page reload.
It's why clicking a <Link> back to a page shows the previous payload, even if the server data changed.
In Next.js 15, the default staleTime for page segments is 0, so dynamic pages are refetched on navigation by default.

This is the layer that confuses people most: the server already revalidated, but the client still shows old UI from its Router Cache.

Clearing the Router Cache After a Mutation

Server-side revalidation alone doesn't update the client's Router Cache. After a Server Action, you must invalidate the client cache too.

revalidatePath / revalidateTag inside a Server Action also marks the Router Cache stale, so the next navigation refetches.
router.refresh() from useRouter clears the Router Cache and re-renders server components for the current route.
A full page reload wipes the Router Cache entirely.

Pairing a Server Action's revalidateTag with the cookie-based action response keeps both server and client fresh.

'use client';
import { useRouter } from 'next/navigation';

export function RefreshButton() {
  const router = useRouter();
  return (
    <button onClick={() => router.refresh()}>
      Reload server data
    </button>
  );
}

Tracing a Request Through All Four

Follow a single navigation to see the layers cooperate:

1. Router Cache (client): if a fresh payload exists, render it instantly — stop here.
2. Full Route Cache (server): static route? serve the cached HTML/RSC.
3. Data Cache (server): dynamic render reads fetch results from here if cached/unexpired.
4. Request Memoization: within that render, duplicate fetches collapse into one.

Stale data originates at whichever layer answered first. Debug top-down: rule out the Router Cache before blaming the server.

A Pure-TS Memoization Analogy

Request Memoization is conceptually a per-render memo keyed by arguments. Here's the same idea in plain TypeScript you can run and reason about — it dedupes concurrent calls by caching the in-flight promise.

The real Next.js version resets this map each render; this demo keeps it for the program's lifetime.

function memoize<T>(fn: (k: string) => Promise<T>) {
  const inFlight = new Map<string, Promise<T>>();
  return (key: string): Promise<T> => {
    if (!inFlight.has(key)) inFlight.set(key, fn(key));
    return inFlight.get(key)!;
  };
}

let calls = 0;
const load = memoize(async (k: string) => {
  calls++;
  return `data:${k}`;
});

async function main() {
  const [a, b] = await Promise.all([load('x'), load('x')]);
  console.log(a, b, 'network calls =', calls);
}
main();

Quick Check: Stale UI After a Server Action

You run a Server Action that creates a product and calls revalidateTag('products'). The server's Data Cache and Full Route Cache are now correct, but a user who navigates back via a <Link> still sees the old list. Which layer is serving the stale data?

Recap: The Four Caches

You can now place any stale-data bug at the right layer:

Request Memoization — per-render fetch dedup; discarded after the render; extend to non-fetch with cache().
Data Cache — durable, cross-request fetch storage; opt in with force-cache/revalidate; purge with revalidateTag/revalidatePath.
Full Route Cache — rendered HTML/RSC for static routes; dynamic APIs opt out.
Router Cache — client-side RSC payloads for visited routes; clear with revalidation or router.refresh().

Debug top-down (client → server): rule out the Router Cache first, then Full Route, Data, and finally memoization.

常见问题解答

「四种缓存：请求、数据、完整路由与路由器」课时是免费的吗？

是的 — 「四种缓存：请求、数据、完整路由与路由器」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Next.js 15 Fullstack (App Router + Server Actions) 课程的其余内容，请升级到 CoddyKit PRO。 Next.js 15 Fullstack (App Router + Server Actions) 课程共包含 4 节课。

「四种缓存：请求、数据、完整路由与路由器」这节课中我会学到什么？

梳理各缓存层之间的交互，以及 App Router 应用中的过期数据从何而来。你通过在浏览器中直接运行的动手代码来练习 Next.js 15 Fullstack (App Router + Server Actions)，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Next.js 15 Fullstack (App Router + Server Actions) 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Next.js 15 Fullstack (App Router + Server Actions) 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「四种缓存：请求、数据、完整路由与路由器」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Next.js 15 Fullstack (App Router + Server Actions) 课中编写并运行代码吗？

能。每节 Next.js 15 Fullstack (App Router + Server Actions) 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Next.js 15 Fullstack (App Router + Server Actions)