2026 年 Next.js 缓存心智模型：请求记忆化、数据缓存、完整路由缓存与路由缓存一次讲清

Next.js Caching Mental Model in 2026: Request Memoization, Data Cache, Full Route Cache, and Router Cache Explained Once and for All This article was written with the assistance of AI, under human supervision and review. Most Next.js caching problems stem from treating four distinct mechanisms as a single black box. Teams call fetch, see unexpected stale data, and reach for { cache: 'no-store' } everywhere. Performance collapses. The root cause is conceptual: developers conflate request memoization (a render-level optimization), the data cache (persistent server-side storage), the full route cache (static HTML at build time), and the router cache (client-side navigation memory). Each layer has different scope, lifetime, and invalidation rules. Misunderstanding the boundaries produces bugs that look like framework quirks but are actually predictable consequences of a four-tier architecture. The solution is a layered mental model. Request memoization deduplicates identical fetches within a single React render pass. The data cache persists fetch responses across requests on the server. The full route cache stores prerendered HTML pages at build time. The router cache remembers navigated route payloads on the client. When teams internalize these boundaries, they stop over-invalidating (wasting CPU) and under-invalidating (serving stale data). The framework becomes legible. Key Takeaways Next.js uses four independent caching layers: request memoization (render-scoped), data cache (server-persistent), full route cache (build-time HTML), and router cache (client-navigation). Request memoization deduplicates identical fetch calls within a single render pass and resets after the response completes. The data cache persists fetch responses across requests until revalidated or invalidated, while the full route cache stores static HTML that bypasses server rendering entirely. The router cache remembers client-side navigations for 30 seconds (dynamic routes) or 5 minutes (static routes) to speed up back/forward navigation. Conflating these layers produces stale-data bugs and performance collapse when teams apply the wrong invalidation strategy. Request Memoization: Same Request, Same Render Request memoization deduplicates identical fetch calls within a single React render pass. When multiple components request the same URL with the same options during server-side rendering, Next.js executes the fetch once and returns the cached response to all callers. The memoization scope is the render tree. After the server sends the HTML response, the memoization cache resets. The next request starts with an empty memoization layer. This optimization prevents redundant network calls when a layout and three child components all fetch /api/user. Without memoization, four identical requests would fire. With memoization, one request fires and four components receive the same data. The mechanism is automatic. Developers do not configure it. The only requirement is that the fetch URL and options object match exactly. // app/layout.tsx async function RootLayout() { const user = await fetch('https://api.example.com/user').then(r => r.json()); return {user.name}; } // app/page.tsx async function HomePage() { const user = await fetch('https://api.example.com/user').then(r => r.json()); return Welcome, {user.name}; } // Result: only ONE network request fires during SSR // Both components receive the same response Enter fullscreen mode Exit fullscreen mode The memoization layer sits between the component and the data cache. When a component calls fetch, Next.js first checks the memoization cache. If a match exists, it returns immediately. If not, it proceeds to the data cache. If the data cache misses, the framework executes the network request and populates both caches. This distinction is critical. Request memoization is ephemeral. It exists only for the duration of the render. The data cache is persistent. It survives across requests until explicitly invalidated. Developers who conflate the two apply revalidation strategies to the wrong layer and wonder why cache invalidation fails. Data Cache: Server-Side Persistent Storage The data cache persists fetch responses across requests on the server. When a fetch completes, Next.js stores the response in a server-side cache keyed by URL and options. Subsequent requests for the same resource return the cached response without hitting the network. The cache persists until the developer invalidates it with revalidatePath, revalidateTag, or a time-based revalidation window. The data cache is opt-in by default for GET requests in the App Router. Developers control caching behavior with the next.revalidate option or the cache option. A fetch call with no options caches indefinitely. Adding { next: { revalidate: 3600 } } revalidates the cache entry every hour. Adding { cache: 'no-store' } bypasses the data cache entirely. // Cached indefinitely until manual invalidation const product = await fetch('https://api.example.com/products/123').then(r => r.json()); // Revalidated every 60 seconds const inventory = await fetch('https://api.example.com/inventory', { next: { revalidate: 60 } }).then(r => r.json()); // Never cached const user = await fetch('https://api.example.com/user', { cache: 'no-store' }).then(r => r.json()); Enter fullscreen mode Exit fullscreen mode The framework stores cached responses in a persistent key-value store. On Vercel, this is a distributed cache shared across all serverless function invocations. On self-hosted deployments, it is an in-memory or file-based cache local to the Node.js process. The cache survives server restarts in production environments. Invalidation is manual. Calling revalidatePath('/products') purges all data cache entries associated with that route. Calling revalidateTag('products') purges entries tagged with that string. Time-based revalidation ({ next: { revalidate: 60 } }) re-fetches stale entries in the background and serves the cached response while updating. The failure mode here is subtle but expensive. Developers assume the data cache is request-scoped like request memoization. They fetch user-specific data, see it cached across users, and scramble to add { cache: 'no-store' } everywhere. The correct fix is to use the data cache only for shared, public data and opt out selectively for personalized content. Full Route Cache: Static HTML at Build Time The full route cache stores prerendered HTML pages at build time. When a route is statically generated during next build, the framework caches the entire HTML response. Subsequent requests for that route serve the cached HTML without executing React rendering or data fetching. The cache persists until the next build or until manually invalidated with revalidatePath. Static routes are opted into the full route cache by default if they contain no dynamic segments and no generateStaticParams calls. Dynamic routes can be statically generated if generateStaticParams returns a finite list of parameter values. Routes that call cookies(), headers(), or use dynamic functions like useSearchParams are excluded from the full route cache and render on demand. // app/products/[id]/page.tsx // This route is statically generated at build time export async function generateStaticParams() { const products = await fetch('https://api.example.com/products').then(r => r.json()); return products.map((p: any) => ({ id: p.id })); } export default async function ProductPage({ params }: { params: { id: string } }) { const product = await fetch(`https://api.example.com/products/${params.id}`).then(r => r.json()); return {product.name}; } // Result: HTML for /products/1, /products/2, etc. is cached at build time // No server rendering occurs on request Enter fullscreen mode Exit fullscreen mode The full route cache is the most aggressive optimization. It eliminates server rendering entirely. The tradeoff is staleness. If product data changes after the build, the cached HTML serves outdated content until the next revalidation. Time-based revalidation (export const revalidate = 3600) triggers background regeneration at the specified interval. On-demand revalidation (revalidatePath('/products/123')) purges the cache entry immediately. The failure mode is over-staticization. Teams statically generate routes that contain user-specific data, see stale content for logged-in users, and abandon static generation entirely. The correct approach is to split routes into static shells (layout, navigation) and dynamic data (user-specific content fetched client-side or with { cache: 'no-store' }). Router Cache: Client-Side Navigation Memory The router cache remembers client-side navigation payloads on the browser. When a user navigates to a new route with or router.push(), Next.js fetches the route payload (RSC payload, not full HTML) and caches it in memory. Subsequent navigations to the same route return the cached payload without a network request. The cache duration depends on route type: 30 seconds for dynamic routes, 5 minutes for static routes. This optimization speeds up back/forward navigation. When a user navigates from /products to /products/123 and back to /products, the second visit to /products reads from the router cache instead of re-fetching. The cache is scoped to the browser tab. Refreshing the page clears the cache. Opening a new tab starts with an empty cache. // app/products/page.tsx export default function ProductsPage() { return ( Product 1 Product 2 ); } // When the user clicks Product 1, Next.js fetches /products/1 // The payload is cached in the router cache for 30 seconds (dynamic route) // Clicking back to /products returns the cached payload if within 30 seconds Enter fullscreen mode Exit fullscreen mode The router cache is invisible to most developers. It is an automatic client-side optimization. The only user-facing control is router.refresh(), which invalidates the current route's cache entry and re-fetches. Developers who see stale data after mutations typically need to call router.refresh() or revalidatePath on the server, not configure the router cache directly. The implication here is that client-side navigation can serve stale data even when server caches are invalidated. If a developer calls revalidatePath('/products') after a mutation, the data cache updates, but the router cache on the user's browser still holds the old payload for 30 seconds. Calling router.refresh() after the mutation forces an immediate re-fetch and syncs the client with the server. How the Four Layers Interact: A Mental Model The four caching layers form a hierarchy. A request flows through request memoization, then the data cache, then the full route cache, then the router cache. Each layer has a different scope and lifetime. Request memoization is render-scoped and ephemeral. The data cache is server-persistent and invalidated manually or by time. The full route cache is build-persistent and invalidated manually or by time. The router cache is client-persistent and invalidated by navigation or refresh. When a user navigates to /products/123, the browser first checks the router cache. If the payload is fresh, it renders immediately. If not, it sends a request to the server. The server checks the full route cache. If the HTML is prerendered, it returns instantly. If not, it executes React rendering. During rendering, each fetch call checks request memoization, then the data cache. If both miss, the network request executes and populates both caches. This hierarchy explains why invalidation strategies must target the correct layer. Calling revalidatePath('/products') invalidates the data cache and the full route cache but does not invalidate the router cache on the client. Users navigating back to /products still see cached payloads for 30 seconds. Calling router.refresh() after the mutation forces the client to re-fetch. The mental model is layered caching with explicit invalidation. Developers choose which layers to use for each data type. Shared, public data uses all four layers. User-specific data bypasses the data cache and full route cache with { cache: 'no-store' }. Time-sensitive data sets a short revalidation window. Immutable data caches indefinitely. Common Mistakes and How to Avoid Them The most common mistake is conflating request memoization with the data cache. Developers see deduplication within a render and assume fetch responses are never cached across requests. They add { cache: 'no-store' } to every fetch, bypass the data cache, and lose server-side caching entirely. The correct approach is to use the data cache for shared data and opt out selectively for personalized content. The second mistake is caching user-specific data. Teams fetch /api/user without { cache: 'no-store' }, see the response cached across users, and file bug reports. The data cache is shared across all requests. Caching personalized data without a user ID in the cache key serves the wrong user's data. The correct fix is to add { cache: 'no-store' } to user-specific fetches or include the user ID in the URL. The third mistake is forgetting to invalidate after mutations. Developers call fetch with caching enabled, mutate the data with a POST request, and see stale data on the next GET. The data cache does not automatically invalidate on mutations. The correct approach is to call revalidatePath('/products') or revalidateTag('products') in the mutation handler. The fourth mistake is over-staticizing dynamic routes. Teams add generateStaticParams to routes with thousands of dynamic segments, see long build times, and abandon static generation. The full route cache is designed for finite, enumerable parameter sets (product categories, blog posts). Routes with infinite parameter spaces (user profiles, search results) should render on demand. The fifth mistake is ignoring the router cache after mutations. Developers invalidate the server cache with revalidatePath, refresh the page, see updated data, and assume the fix is complete. Users navigating with still see stale data for 30 seconds because the router cache is not invalidated. The correct fix is to call router.refresh() in the mutation handler to force the client to re-fetch. Frequently Asked Questions When should I use the data cache versus the full route cache? Use the data cache for frequently changing data that updates between builds (product inventory, user counts). Use the full route cache for rarely changing data that updates on a predictable schedule (blog posts, documentation). The data cache invalidates per-request with revalidatePath. The full route cache invalidates at build time or with time-based revalidation. Why does my fetch call return cached data even after I call revalidatePath? The router cache on the client still holds the old payload for 30 seconds after revalidatePath invalidates the server cache. Call router.refresh() in the mutation handler to force the client to re-fetch immediately. How do I prevent caching for user-specific data? Add { cache: 'no-store' } to the fetch options or include the user ID in the URL. The data cache is shared across all requests, so caching without a user-specific key serves the wrong user's data. What is the difference between request memoization and the data cache? Request memoization deduplicates identical fetch calls within a single render pass and resets after the response completes. The data cache persists fetch responses across requests until revalidated or invalidated. Request memoization is ephemeral. The data cache is persistent. When should I use revalidateTag versus revalidatePath? Use revalidateTag when multiple routes share the same data (all product pages tagged with 'products'). Use revalidatePath when invalidating a single route or a group of routes under a path prefix (/products/*). Tags provide finer-grained control. Paths provide broader invalidation. Conclusion: Building a Caching Strategy That Works Next.js caching is a four-layer architecture. Request memoization deduplicates within a render. The data cache persists across requests. The full route cache preenders at build time. The router cache remembers client-side navigations. Each layer has different scope, lifetime, and invalidation rules. Conflating them produces stale-data bugs and performance collapse. Internalizing the boundaries produces fast, cacheable apps. That covers the essential patterns for Next.js caching. Apply these in production and the difference will be immediate. For deeper caching control patterns, see Next.js unstable_cache and fetch cache in 2026. For framework-level caching changes, see Next.js 15 caching changes. For future optimizations, see Next.js 16 Turbopack, Partial Prerendering, and cache improvements.