Nextjs caching is quite complex, but its realtive well outlined here https://nextjs.org/docs/app/deep-dive/caching

key takeaways so far

• shared fetch calls 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: