Design a Server-Side Rendering (SSR) System

To design an SSR system for a platform like Netflix, I would start by defining the core goal: delivering fully rendered HTML immediately for fast Time to First Byte (TTFB) and optimal SEO, followed by efficient client-side interactivity. The architecture begins at the Edge, where a CDN intercepts requests. Instead of serving static assets alone, the edge forwards requests to a lightweight Node.js SSR gateway that fetches necessary metadata from microservices, such as show details or user preferences. This gateway renders the React/Vue templates into a string of HTML, embedding the initial JSON state directly into the page script tags. For caching, I would implement aggressive HTTP caching at the edge with varying cache keys based on user authentication status and region, ensuring personalized content remains secure while maximizing cache hits for public data. Once the HTML reaches the browser, the client downloads the minimal JavaScript bundle required for hydration. The hydration process involves parsing the embedded state, attaching event listeners to existing DOM nodes, and reactivating the framework's virtual DOM logic without causing layout shifts. Crucially, I would implement a graceful degradation strategy where if the server times out, we serve a cached static version or a skeleton UI to maintain perceived performance.