How to set staleTime for SSR and CDN cache?

[kevinxh]

Hi!

First for most, thanks for reading this!

I have a web app that supports server side rendering, and embed the query data in the HTML scripts, then client side hydrates it.

On the first page load, I want to re-use the data fetched from server side and avoid refetch unless user navigates back to the page. To achieve that, i set the staleTime to 10s, so that when it reaches the browser, the data is not considered stale.

However, my page is also cached by CDN via the cache-control header, for 15 minutes.

Here comes the problem, for a cached visit, which could happen any time within 15 minutes, the SSR data is stale since 10s < 15min.

What can I do to ensure the first page load does not refetch data?

One idea I have is to change the dataUpdatedAt timestamp to Date.now() before React hydrates my app. Would this work?

Here is a screenshot of my SSR data embedded on the page.

[TkDodo]

caching in react query is time based, so if you set staleTime to 10s, and then your CDN delivers data that is 10 minutes old, well, we are going to show that stale data immediately and try to get new data.

if you want things to be fresh for 15 minutes (as the CDN time shows), it's probably best to also set staleTime to that value.

[alexryanterry]

@kevinxh - i am interested in experimenting with some of these ideas as well. Is there a repository or some code snippets you can share that show how you are achieving CDN caching? I am interested in implementing caching on Netlify with Tanstack Start. I am considering this package: https://www.npmjs.com/package/cdn-cache-control.