Junior
What is server-side rendering (SSR)?
sobes.tech AI
Answer from AI
Server-Side Rendering (SSR) is the process where a web page is generated on the server in response to a client request. Instead of sending the client an empty HTML document and a JavaScript bundle for subsequent rendering in the browser, the server creates a complete HTML document with the content already inserted.
Advantages of SSR:
- SEO optimization: Search engines find it easier to index content since they are provided with ready-made HTML rather than dynamically generated JavaScript.
- Time to First Paint (FCP): Users see the page content faster because the server has already provided the ready HTML, which the browser can immediately display.
- Performance on low-end devices: Less resource-intensive for the client device, as the main work of page generation is done on the server.
- Improved social media sharing: Social networks receive ready content for previews rather than an empty page.
Disadvantages of SSR:
- Increased server load: The server must handle rendering requests for each page, which can be resource-consuming.
- Reduced interactivity until hydration: After receiving the HTML document, the browser needs time to "hydrate" — bind JavaScript logic to the already rendered DOM. Until hydration is complete, the page may be partially or fully non-interactive.
- Development complexity: Requires a specific application architecture and special frameworks (e.g., Next.js for React, Nuxt.js for Vue.js, Angular Universal for Angular).
In SSR, the client sends a request to the server, the server processes it, generates an HTML string containing the ready content and layout, and sends it back to the client. The browser displays the received HTML, then loads and executes client-side JavaScript to add interactivity (hydration process).