MENU
Full Route Cache
The Full Route Cache in Next.js caches routes at build time (often called Static Site Generation or Automatic Static Optimization) to improve load times by serving pre-rendered routes without needing server-side rendering for every request:
Steps:
- Server Rendering: Next.js divides rendering into chunks, rendering Server Components as a Server Component Payload (a compact binary format). This payload contains rendered Server Component results, placeholders for Client Components, and props.
- Server Caching: Next.js caches the rendered result (payload and HTML) for static routes at build time or during revalidation, allowing for fast delivery.
- Client Hydration: Upon request, the cached HTML provides an initial, non-interactive preview, while the React Server Component Payload updates the DOM and JavaScript hydrates Client Components for interactivity.
The caching of a route at build time depends on its rendering type: static routes are cached by default, while dynamic routes are rendered at request time and are not cached.
Duration
By default, the Full Route Cache persists across user requests.
Revalidation
You can refresh the Full Route Cache by:
- rebuilding the app and redeploying the production server.
- revalidating the Data Cache.
- setting revalidate values in your Next.js configuration, which controls how frequently the cached page is refreshed.
Opting Out
To opt out of the Full Route Cache and dynamically render content on every request, you can:
- Use a Dynamic API to dynamically render routes while still allowing Data Cache.
- Set dynamic = 'force-dynamic' or revalidate = 0 in route config, which skips both Full Route and Data Caches, rendering components and fetching data on each request. The Router Cache remains active on the client side.
- Opt out of Data Cache for specific fetch requests ({cache: 'no-store'}), allowing those requests to fetch data on each request while keeping other requests cached, enabling a mix of cached and uncached data.