Dmytro Morar
Next.js

Fetch

In App Router, fetch runs on the server in RSC and ties into caching and rendering modes.

Server-side fetch

  • In RSC, fetch runs on the server and caches by default.
  • In Client Components, fetch behaves like browser fetch.

Cache policies

fetch(url); // cache: "force-cache" (default)
fetch(url, { cache: "no-store" }); // SSR every request
fetch(url, { next: { revalidate: 60 } }); // ISR

Rendering mode mapping

fetch configMode
cache: "force-cache"SSG / ISR
next: { revalidate }ISR
cache: "no-store"SSR
cookies/headersSSR

What makes a route dynamic

  • cookies or headers
  • cache: "no-store"
  • dynamic = "force-dynamic"
  • dynamic params

On this page