[Next.js 13 공식 문서 App Router] - Caching

Caching in Next.js

Overview

  - Request Memoization

  - Data Cache

  - Full Route Cache

  - Router Cache

Request Memoization

  - How Request Memoization Works

    - React extends the fetch API to automatically memoize requests that have the same URL and options

    - Once the route has been rendered and the rendering pass is complete,

       memory is "reset" and all request memoization entries are cleared

    - For cases where fetch is not suitable, We can use the React cache function to memoize functions

  - Duration

    - The cache lasts the lifetime of a server request
       until the React Component tree has finished rendering

  - Revalidating

  - Opting out

    - AbortControll signal to the fetch options

Data Cache

  - How the Data Cache Works

  - Duration

    - The Data Cache is persistent across incoming requests and deployments
       unless we revalidate or opt-out

  - Revalidating

    - Time-based Revalidation

      - Revalidate data after a certain amount of time has passed and a new request is made
      - next.revalidate option of a fetch (unit: seconds)

      - Keeps the stale data in the cache until the fresh data is fetched

    - On-demand Revalidation

      - Revalidate data based on an event

      - revalidatePath

      - revalidateTag

  - Opting out

    - Set the cache option to no-store

Full Route Cache

  1. React Rendering on the Server

  2. Next.js Caching on the Server (Full Route Cache)

  3. React Hydration and Reconciliation on the Client

  4. Next.js Caching on the Client (Router Cache)

  5. Subsequent Navigations

  - Static and Dynamic Rendering

  - Duration

  - Invalidation

    - Revalidating Data

    - Redeploying

  - Opting out

    - Using a Dynamic Function

    - Using the dynamic = 'force-dynamic' or revalidate = 0 route segment config options

    - Opting out of the Data Cache

Router Cache

  - Duration

    - Session

    - Automatic Invalidation Period

  - Invalidation

    - In a Server Action

    - router.refresh

  - Opting out

Cache Interactions

  - Data Cache and Full Route Cache

  - Data Cache and Client-side Router cache

APIs

  - <Link>

    - Automatically prefetches routes from the Full Route Cache
      and adds the RSC Payload to the Router Cache

  - router.prefetch

  - router.refresh

  - fetch

  - fetch options.cache

  - fetch options.next.revalidate

  - fetch options.next.tag and revalidateTag

  - revalidatePath

  - Dynamic Functions

  - Segment Config Options

  - generateStaticParams

  - React cache function

  - unstable_cache