How does SSR (Server-Side Rendering) improve performance?
Answer
SSR renders HTML on the server before sending it to the browser, improving several performance metrics. Benefits: Faster FCP and LCP: the browser receives complete HTML and can paint content without waiting for JavaScript to download and execute. A client-side rendered (CSR) app shows blank/loading screen until JS executes. Better SEO: search engine crawlers can index fully-rendered HTML without executing JavaScript. Lower time to meaningful content on slow devices: the server does rendering work; the client only parses HTML. Social sharing: Open Graph meta tags are present in the initial HTML. Trade-offs: TTFB increases: server must generate HTML per request — slower than serving a cached static file. Server cost: more CPU for rendering. Hydration cost: client still needs to "hydrate" the HTML with JavaScript, which can be slow (TBT impact). Streaming SSR: React 18 + Next.js/Remix support streaming — HTML chunks are sent progressively as they render, combining fast TTFB with full HTML. SSG (Static Site Generation): pre-render at build time for maximum performance with no SSR server cost.
More Web Performance Questions
View all →- Intermediate How do you optimize React applications for performance?
- Intermediate What is the browser performance API and how do you measure performance?
- Intermediate What is layout thrashing and how do you avoid it?
- Intermediate What is resource prioritization in browsers?
- Intermediate What is a performance budget?