How do you choose between CSR, SSR, SSG, and Streaming SSR per route?

Decide per route based on three criteria: Is the page shareable (SSG/ISR for marketing/docs)? Is it personal and latency-sensitive (Streaming SSR with Suspense for product grids)? Or is it behind a login with high interactivity (CSR for dashboards/editors)?

What is the performance cost of personalizing the HTML shell?

Putting personalized elements directly in the initial HTML shell makes the document unshareable at CDN edge nodes, causing every single request to hit origin database queries and adding origin render latency to TTFB.

How does React Suspense enable Streaming SSR without layout shift?

The server flushes the fast shell and product grid immediately while reserving height with a skeleton for slow queries. When the slow query resolves, markup is streamed down the open connection and patched into the reserved space.

Decide Rendering Per Route

mediumCore Concept

Asked at

Airbnb, Amazon, Netflix, Shopify, Vercel

Problem statement

Where the HTML gets built, and when. Static, revalidated, server-rendered, and streamed — chosen per route rather than once per app, with the trade-off said out loud.

Premium

The full solution is part of HelloFrontend Pro

The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.

Full RADIO-framework walkthrough with architecture diagrams
Data model, API design, and rendering strategy trade-offs
Performance, accessibility, and offline sections plus a model answer

Unlock the full solution →

Already a member? Log in to open the workspace.

Decide Rendering Per Route

Problem statement

The full solution is part of HelloFrontend Pro

More System Design questions

Design a News Feed UI

Design a Component Library / Design System

Design Travel Booking Platform (Expedia/Booking.com)

Design Perplexity (RAG Search with Citations)