Understanding React Server Rendering

# Understanding React Server Rendering Server-side rendering (SSR) means React generates the initial HTML on the server and sends a fully-formed page to the browser, instead of shipping an empty HTML shell that JavaScript fills in later. ## Why It Matters With pure client-side rendering, users see a blank page until JavaScript downloads, parses, and runs. On slower connections or devices, that delay is very noticeable. SSR sends visible content immediately. ## SSR vs CSR vs SSG - **CSR (client-side rendering)**: Browser does all the work. Fast to build, slower first paint. - **SSR (server-side rendering)**: Server renders HTML per request. Good for dynamic, personalized pages. - **SSG (static generation)**: HTML is built once at build time. Fastest possible load, best for content that doesn't change per user. ## Hydration After SSR sends HTML, React "hydrates" it on the client — attaching event listeners and making it interactive. If the server-rendered HTML doesn't match what the client expects, you get hydration errors, a common source of bugs. ## SEO Benefits Search engine crawlers read HTML directly. SSR ensures your content is present in that initial HTML rather than depending on JavaScript execution, which some crawlers handle inconsistently. ## When Not to Use SSR Highly interactive, user-specific dashboards that don't need to be indexed by search engines often do fine with client-side rendering, avoiding the extra server load SSR introduces. ## Conclusion Frameworks like Next.js handle the SSR mechanics for you, but understanding what's actually happening under the hood helps you debug hydration issues and choose the right rendering strategy per page.