> [!note] "Rendering" in web dev is used more loosely >In web dev, "rendering" can be confusing because it's not primarily referring to graphical computation of pixels on the screen. Instead, it's used more loosely to describe the process of generating the HTML, CSS, and JavaScript that makes up the user interface. # Server-side rendering (SSR) The server generates the complete HTML content of a page and sends it to the browser. The browser then renders the received HTML, displaying the page to the user. #### SSR Advantages - Better initial load performance. - Improved SEO. - Compatibility with older browsers, even with no JavaScript support. #### SSR Disadvantages - Increased server load. Generating HTML on the server for each requests can be resource-intensive. - Slower interactivity. User interactions that require updating the page may result in a full page reload or additional server requests. # Client-side rendering (CSR) Client-side rendering renders web pages entirely in the browser using JavaScript. In a CSR approach, the initial HTML sent from the server is minimal, and the JavaScript running in the browser is responsible for rendering the content and handling user interactions. CSR is often associated with single-page apps. #### CSR Advantages - Cheap and easy to host. - No full page reload required. - Provide rich, fast site interactions after initial load. #### CSR Disadvantages - Longer initial load time, as the entire JavaScript app needs to be downloaded and executed. - Requires more performant client devices. - Impacted SEO, as SEO crawlers might not wait for the content to load. # Combining SSR and CSR Many modern web applications use a combination of server-side rendering and client-side rendering. The initial page load is server-rendered. Once the page is loaded, JavaScript takes over and enables dynamic updates and interactivity on the client-side. See also: [[Server-Side Rendering vs Static Site Generation]]