Teachnique
      CourseRoadmaps
      Login

      Introduction

      Project SetupCLI

      IntroductionAPP RouterTemplateLoading UIError Handling404 Page

      Linking and Navigating

      Dynamic RoutesRoute groupsParallel RoutesIntercepting Routes

      Route handlersCacheCommon Questions

      Middleware

      CSRSSR & SSGISR

      React Server ComponentsServer-Side Rendering

      SuspenseStreaming

      Server & Client ComponentServer vs. Client ComponentBest Practices

      Server-Side Rendering Strategies

      Data Fetching & Caching & RedirectThird-Party Request Libraries on the Server SideBest Practices

      Request MemoizationData CacheFull Route CacheRouter Cache

      Server Actions IFormServer Actions IIOptimistic Update

      Tailwind CSSCSS-in-JSSass

      Environment VariablesAbsolute Imports& Module Path AliasesRoute Segment Config

      Image & LCPImage IImage IIOptimizing IOptimizing II

      Next FontFont ParameterApply Styles

      Feedback

      Submit request if you have any questions.

      Course
      Full Route Cache

      Next.js Mastery: From Fundamentals to Full-Stack

      Unlock the power of Next.js with this comprehensive course! Starting with the basics, you’ll learn essential skills such as routing, data fetching, and styling. Progress through practical projects, including building your own React Notes app, to gain hands-on experience. Dive into the source code to understand the inner workings and core principles of Next.js. Perfect for developers with a basic knowledge of React and Node.js, this course ensures you’ll be ready to create high-performance full-stack applications efficiently. Join us and master Next.js, backed by industry experts and a supportive learning community.

      Full Route Cache

      In this section, we'll continue exploring Next.js's caching mechanisms, focusing on full route cache and router cache.

      1. How It Works

      In Next.js, when you build your application, the framework automatically renders and caches routes. This means that when a route is accessed, it can directly use the cached version instead of being re-rendered on the server, speeding up page load times.
      You might wonder, what does caching a route mean? We usually talk about caching data, but how do you cache a route? Let's review the rendering process in Next.js:
      Next.js uses React's API to orchestrate rendering. During rendering, the process is split into multiple chunks based on routes and Suspense boundaries. Each chunk is rendered in two steps:
      1. Server Component Rendering: React renders the server components into a special data format called React Server Component Payload (RSC payload). For example, consider the following server component code:
      <div>
  Don’t give up and don’t give in.
  <ClientComponent />
</div>
      React converts it into the following RSC payload:
      ["$","div",null,{"children":["Don’t give up and don’t give in.", ["$","$L1",null,{}]]}]
1:I{"id":123,"chunks":["chunk/[hash].js"],"name":"ClientComponent","async":false}
      This format is optimized for streaming. It can be sent from the server to the client in chunks, allowing the client to progressively parse the RSC payload and render the page.However, this RSC payload isn't directly executable. Instead, it contains information such as:
      1. The rendering result of server components
      1. Placeholders and references for client components
      1. Data passed from server components to client components
      
      For instance, in the RSC payload above, $L1 represents ClientComponent. The client receives the RSC payload, parses it, downloads the corresponding bundle for ClientComponent, and renders it in the $L1 placeholder.
      2. HTML Rendering: Next.js uses the RSC payload and client component code to render the final HTML on the server.
      Here’s a visual representation of this process:
      
      In summary, the products of route rendering are the RSC payload and the HTML. Full route cache stores these two products.
      However, whether a route is cached during the build depends on whether it’s statically or dynamically rendered. Static routes are cached by default, while dynamic routes, which can only be rendered on request, are not. The diagram below illustrates the difference between static and dynamic rendering:
      
      In this diagram, the static route /a uses the full route cache, so it doesn’t need to be re-rendered. The dynamic route /b doesn’t use the full route cache, so it is re-rendered each time. However, this doesn’t affect the client-side router cache, so subsequent requests still hit the router cache.

      2. Duration

      Full route cache is persistent by default, meaning it can be reused across multiple user requests.

      3. Invalidation

      There are two ways to invalidate the full route cache:
      1. Revalidating Data: Revalidating the data cache will invalidate the full route cache, as the rendering output depends on the data.
      2. Redeploying: While data cache can persist across deployments, the full route cache is cleared during redeployment.

      4. Opting Out

      To opt out of full route caching, you can switch to dynamic rendering:
      • Use Dynamic Functions: Using dynamic functions will switch to dynamic rendering, but data cache can still be used.
      • Route Segment Configuration: Setting dynamic = 'force-dynamic' or revalidate = 0 will skip both full route and data caching. Each request will fetch fresh data and re-render the components. However, the router cache will still be used, as it’s a client-side cache.
      • Opt Out of Data Caching: If any fetch request in the route opts out of caching, the route will also opt out of full route caching. The specific fetch request will refetch data on each request, while other fetch requests may still use the data cache. Next.js allows for a mix of cached and uncached data within the same route.
      In summary, full route cache is only used for static rendering, storing the RSC payload and HTML on the server.
      Switching to dynamic rendering will opt out of full route caching. To learn more about switching from static to dynamic rendering, refer to our previous discussion on Server-Side Rendering Strategies.