proper way to do client-side fetch

[lili21]

I'm trying to cache my page in the CDN by cache-control. but the page contains something that dynamic based on user info.

Let's say the green part is static, every user visit the page will be the same. and the yellow part is dynamic, this part content is base on user's info.

I am thinking about do it this way.

1. Only server render the green part, and cache this part content in the CDN.
2. Client side render the yellow part.

But I'm thing about the waterfall issue. like if I do it like old ways (fetch in useEffect stuff). is there better way to do this?
Can I use react-router data fetching pattern in a Remix application? like fetching it at client-side, but not after render.

[kiliman]

I believe the recommendation is to not cache HTML pages that contain user-specific content. Just cache the loaders.

[lili21]

Cause the static part is like 90% percent of the page, so I'm trying to cache that part. Cache the loader doesn't work for me ,cause this is a one route page, no navigation.

[sergiodxa]

You could cache the "static" part server-side instead.

HTTP cache is all or nothing, you cache the whole response or not at all, a server-side cache like Redis/Worker KV/LRU Cache/etc would let you cache parts of the loader data.

[lili21]

My server is not running in edge, and we already got a CDN between the user and my server. So I guess I would just rely on the CDN cache and also keep my server as simple as possible.
in this way, I need to move the user-specific content from server-rendering to client-rendering, and trying to figure out how to do that part data fetching properly.

[sergiodxa]

You don't need to run in the edge to us server-side caches like Redis or an in-memory LRU cache

[lili21]

@sergiodxa yeah, my user is far away from my server. server-side cache can help, but not that much. so I'm thinking cache at CDN would be the best. no need to reach my server.