[Discussion] How caching works with RSC components

[carloshenryck]

Even though I've read the documentation and the breakdown, I'm still not fully sure how caching works with RSC components.

For example, in my current project, I'm building a paginated list that is rendered 100% server-side using RSC. When the page changes (e.g., /posts?page=2), a query is made using getClient().

My question is: when a user revisits the same paginated page, is the response cached?

• Is it leveraging the built-in Next.js server-side cache?
• If not, does Apollo implement its own caching layer for RSC?
• Or do fetches inside RSC components bypass caching entirely?

And if there is no caching, would it be more performant to only fetch the first page on the server (with <PreloadQuery />) and handle the rest of the pagination on the client side?

[phryneas]

I'll try to describe the general situation first:

When you do SSR, or RSC, there is no concept of "sessions" - every incoming request is independent and there is no way of tracking certain users.
As a result, we have two options on our end:

• merge the data of all users into one cache - this is obviously a big security risk, so we don't do it
• create a new, independent ApolloClient and InMemoryCache instance for every incoming request

We are doing the latter here - on our end, there is no way we can do caching without introducing security risks.

So an InMemoryCache always exists for a single incoming request. That means that during that request, you can access the cache, e.g. by calling getClient().query in a parent and getClient().readFragment in a child component without the need to pass all data around as props or trigger additional network requests.
But after the response is served, the ApolloClient and InMemoryCache instances are thrown away.

Now to the point of caching beyond that:
Apollo Client just calls fetch (assuming you use HttpLink).
So in the case of Next.js, you can use the Next.js network request cache to prevent too many repeated identical network requests - but you'll have to stick to their documentation for doing so.
In other frameworks, they either provide similar caching mechanisms, or you can use a fetch implementation that provides request caching out-of-the box.

All that said, on top of all that, Next.js might also choose to cache whole pages, so in that case, Apollo Client wouldn't even run when a cached response is served.