SSR
32 bites tagged SSR — interview questions with model answers, and 60-second explainers.
Universal Rendering: Server-First, Client-Interactive
Universal Rendering sends a pre-built HTML page from the server for a fast load, then adds interactivity on the client. It's the default in frameworks like Nuxt for better SEO, but the footgun is writing code that crashes on the server by assuming a browser.
Server-Side Rendering: Your App's First Paint Matters
Server-Side Rendering (SSR) sends a fully-formed HTML page from the server, not a blank one. This speeds up the first paint and helps SEO. The footgun is assuming it's always faster; it increases server load and can delay interactivity.
SSR Hydration: Don't Re-render, Reuse
Hydration tells your client-side app to reuse the HTML sent by the server instead of wastefully re-rendering it. This prevents UI flicker in Server-Side Rendered apps and improves load performance.
Vite's Low-Level SSR API
Vite's SSR API lets you run Vite as a middleware inside your own Node.js server, giving you full control over rendering. It's for building custom SSR solutions, often with Express. The footgun: most apps should use a higher-level SSR plugin, not this API.
React Hydration: Bringing Server HTML to Life
Hydration turns static, server-rendered HTML into a fully interactive React app. It's the core of Server-Side Rendering (SSR), where the client "wakes up" the initial HTML by attaching event listeners.
Dynamic Rendering: On-Demand Pages in Next.js
Dynamic Rendering in Next.js generates a page's HTML on the server for each user request, ensuring fresh content. It's ideal for personalized dashboards or pages with rapidly changing data.
SSR State Hydration: Syncing Server and Client State
SSR hydration syncs server and client state to prevent UI errors. The server renders the page with initial data, then sends that data to the client to "hydrate" its own state store. The footgun is using a global store on the server, which leaks data.
SSR for Styles: Avoiding the 'Flash'
Server-side rendering for styles sends a fully styled page on the first load, preventing the dreaded "flash of unstyled content" (FOUC). This is crucial for CSS-in-JS libraries. The footgun is assuming it works automatically without proper setup.
Get SSR bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.