Nextjs caching is quite complex, but its realtive well outlined here https://nextjs.org/docs/app/deep-dive/caching
key takeaways so far
- shared
fetchcalls which are used in different RSC have memoised response. therefore this fetch:
const dogResp = await fetch(`https://dog.ceo/api/breeds/image/random`);
const dogJson = await dogResp.json();would return the same response acrss all react server components that called it.
This is a react feature and not a next.js feature. Only GET requests get memoised. So GQL queries dont have this side effect as GQL queries are made via a POST request. The workaround is to wrap these api calls in a react.cache() .
export const dynamic = "force-dynamic";is what forces next.js to render the page as a dynamic page other it will statically render it.
There are four levels of caching to be aware of:
| Mechanism | What | Where | Purpose | Duration |
|---|---|---|---|---|
| Request Memoization | Return values of functions | Server | Re-use data in a React Component tree | Per-request lifecycle |
| Data Cache | Data | Server | Store data across user requests and deployments | Persistent (can be revalidated) |
| Full Route Cache | HTML and RSC payload | Server | Reduce rendering cost and improve performance | Persistent (can be revalidated) |
| Router Cache | RSC Payload | Client | Reduce server requests on navigation | User session or time-based |