Server-Side Rendering (SSR)

The process where a client-side JavaScript bundle attaches event handlers to the fully-rendered server HTML. Hydration transforms static markup into an interactive application without re-rendering the visible DOM. This avoids the flash of non-interactive content while preserving the Time to Interactive (TTI) gains achieved by sending pre-rendered HTML. Frameworks like React and Vue serialize their component state to ensure the virtual DOM matches the server output.

Modern SSR frameworks utilize HTTP streaming to send HTML chunks as they are generated, rather than waiting for the entire page to render. This allows the browser to progressively parse and paint content, directly improving First Contentful Paint (FCP). Key mechanisms include:

• Transfer-Encoding: chunked for standard HTTP
• React Suspense with renderToPipeableStream for selective hydration
• Prioritization of critical above-the-fold markup

The capability to execute the same data-fetching logic on both the server and the client. During SSR, the server calls APIs, databases, or headless CMS endpoints to inject data directly into the HTML. This eliminates the client-side loading spinner waterfall. The fetched data is serialized into a global window.__INITIAL_STATE__ variable, allowing the client-side app to resume without redundant network requests.

SSR responses are often cached at the CDN edge to reduce server load and origin latency. Advanced strategies include:

• Stale-While-Revalidate: Serve cached content instantly while asynchronously updating the cache for the next visitor.
• Surrogate-Control: Fine-grained cache directives for CDN providers.
• Cache Key Normalization: Stripping irrelevant headers (like cookies) to maximize cache hit rates for unauthenticated users, while maintaining personalized caches for logged-in segments.

SSR enables dynamic content assembly without client-side flicker by executing personalization logic on the server. Using edge functions (e.g., Cloudflare Workers, Deno Deploy), the HTML is mutated at the CDN node closest to the user based on geolocation, identity resolution, or feature flags. This allows for serving unique, targeted landing pages while maintaining static-like cache performance through cache key templating.

SSR guarantees that web crawlers receive a fully populated HTML payload on the first request, bypassing JavaScript execution queues. This is critical for dynamic rendering strategies where bots receive server-rendered content while users receive client-side apps. Key benefits include:

• Immediate indexing of meta tags and structured data
• Elimination of render budget exhaustion for complex JavaScript
• Reliable social media Open Graph card generation

The client-side process where JavaScript attaches event handlers to the server-rendered HTML, making it interactive. During hydration, React walks the existing DOM tree and binds its virtual representation without re-rendering. Key challenges:

• Time to Interactive (TTI): Users see content quickly but cannot interact until hydration completes
• Hydration mismatch: Errors occur when server-rendered HTML differs from client expectations
• Progressive hydration: Advanced technique that hydrates components individually as they become visible, reducing main-thread blocking

Code that executes identically on both the server and client, enabling shared rendering logic. Critical considerations:

• Environment detection: Code must check for window or process before accessing platform-specific APIs
• Module bundling: Tools like Webpack create separate server and client bundles from the same source
• State serialization: Server state must be serialized to JSON and embedded in the HTML for client hydration

This pattern eliminates code duplication and ensures consistent output regardless of execution context.

A pre-rendering method where HTML is generated at build time rather than on each request. Contrasts with SSR's per-request model. Trade-offs:

• Performance: SSG serves static files from CDN with zero server compute
• Freshness: Content becomes stale until the next rebuild triggers
• Incremental Static Regeneration (ISR): Hybrid approach that regenerates specific pages on-demand while caching the result

Choose SSG for content that changes infrequently; choose SSR when personalization or real-time data is required.

A markup language that assembles dynamic content fragments at the CDN edge, enabling partial page personalization without full SSR. How it works:

• Static page shell is cached globally at the CDN
• <esi:include> tags fetch personalized fragments from an origin server
• Edge worker assembles the final HTML before delivering to the client

ESI reduces origin load by caching the 95% of a page that is shared across users while injecting the 5% that is personalized. Modern alternatives include Cloudflare Workers and Fastly VCL.

The sequence of steps the browser performs to convert HTML, CSS, and JavaScript into pixels on screen. SSR optimizes this by delivering complete HTML upfront. Key metrics affected:

• First Contentful Paint (FCP): Reduced because HTML arrives pre-assembled
• Largest Contentful Paint (LCP): Improved when critical CSS is inlined during SSR
• Cumulative Layout Shift (CLS): Minimized when server-rendered dimensions match final layout

Effective SSR implementations inline critical CSS and defer non-essential JavaScript to maximize rendering speed.