Web Dev//rendering

Where and when HTML gets built. The single most important architectural decision for a web app — it determines what crawlers see, how fast the page loads, and how much JS the browser needs.

Where and when HTML gets built. The single most important architectural decision for a web app — it determines what crawlers see, how fast the page loads, and how much JS the browser needs.

CSR (Client-Side Rendering): the server sends an empty <div id="root"></div> + a JS bundle. The browser executes the JS, builds the DOM, and fills the page. Until JS runs, there's no content. React SPAs and Notion work this way. Crawlers and tools like WebFetch can't read them — they don't execute JS, so they see an empty shell.

SSR (Server-Side Rendering): the server builds the HTML on every request and sends it ready-made. The browser paints it immediately. JS hydrates the page after (adds interactivity). Next.js with SSR does this. Crawlers see the full content.

SSG (Static Site Generation): the HTML is pre-built at build time — no server needed per request. The result is static files served from a CDN. Astro does this by default. Crawlers see everything. Fastest possible load.

The spectrum: CSR (all browser, no content without JS) → SSR (server per request, content ready) → SSG (pre-built, content baked in). Astro defaults to SSG. Next.js supports all three. Pure React + Vite is CSR.