The Full Route Cache

Caching entire HTML pages at build time.

Next.js7 min readConcept 24 of 65

The ultimate performance optimization

The Full Route Cache is what makes Next.js so fast. Instead of executing your React Server Components and hitting your database every time a user visits a page, Next.js does all of that work *once* during the build process (next build).

It generates a static HTML file and a React Server Component (RSC) Payload, and caches them on a CDN. When a user requests the route, they instantly receive the static files.

Static by default

By default, Next.js assumes every route is static. It will aggressively attempt to cache your entire application into the Full Route Cache during deployment.

If a route does not depend on personalized user data (like a marketing page or a blog post), serving it from the Full Route Cache is the absolute best practice for performance and server costs.

Dynamic Opt-outs

However, a route cannot be statically cached if its content depends on the specific user making the request. If a route opts out of the Full Route Cache, it is 'Dynamically Rendered' at request-time.

Next.js automatically switches a route to Dynamic Rendering if it detects the use of a 'Dynamic Function'. These include reading cookies(), headers(), or accessing the searchParams prop.

Static vs Dynamic Timelines

Watch the auto-demo mapping the difference between a Statically Rendered route (which utilizes the Full Route Cache) and a Dynamically Rendered route (which executes at request-time).

Build TimeRequest Time
BUILD TIME (next build)

Static Route (Default)

Next.js Server
export default function Page() { return <h1>Hello</h1>
}
CDN Edge
HTML + RSC
User
GET /

Dynamic Route (Opted Out)

Next.js Server
export default function Page() { cookies()}
Bypassed
HTML + RSC
User
GET /

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Which of the following actions will automatically opt a route out of the Full Route Cache?
  2. 2When is the Full Route Cache populated by default?

Remember this

  • The Full Route Cache stores the entire HTML and RSC payload of a route.
  • It is populated at build time (next build).
  • Next.js statically caches routes by default.
  • Using cookies(), headers(), or searchParams opts the route out into Dynamic Rendering.
  • Use export const dynamic = 'force-static' to manually override the framework.

Done with this concept?

Mark it complete to track your progress. No login needed.