~$Ajay Sogi
← All writing
Frontend Architecture

SSR works best when you decide what can wait

Use server rendering to deliver useful content early, then separate cacheable content, fresh data and browser interaction.

Article2 min read

If someone opens an article, the text should be ready to read while the rest of the page catches up. Server-side rendering helps by sending HTML the browser can display before React finishes attaching interactive behaviour. It’s a useful head start, provided the server can produce that HTML promptly. A slow server response still leaves the reader waiting.

React Server Components address a related concern: how much JavaScript needs to reach the browser. Their logic and dependencies can run outside it, including at build time. SSR produces the initial HTML; Server Components determine where component work happens. You can use both, and using Server Components doesn’t require rebuilding the entire page on every request.

Next.js’s Cache Components approach lets you make these decisions within a page. Stable content can be prerendered, shared data can be cached, and work that needs the current request can run separately. With Cache Components enabled, uncached asynchronous work behind a Suspense boundary can stream in after the initial shell. That lets the article appear while a personalised recommendation is still loading.

I’d start with those boundaries: stable copy, changing data and interactive controls. Give cached data a lifetime that fits how it’s used, and keep Client Components focused on the interactions they handle. Then measure when the content appears and when the controls respond. SSR is useful when it removes waiting for the reader. The rendering label alone tells you very little about whether you’ve achieved that.