SSR / SSG
SSR (Server-Side Rendering) generates HTML on the server on each request. SSG (Static Site Generation) generates all HTML at build time. Both improve load time and SEO compared to client-only rendering.
How a page is rendered has a huge impact on performance, SEO and user experience. Classic SPAs render everything in the browser – which can mean slow first load and SEO issues. SSR and SSG fix this by generating HTML on the server. Frameworks like Next.js and Nuxt.js have made these techniques popular and let you choose the best rendering strategy per page.
What is SSR / SSG?
Server-Side Rendering (SSR) means the page is rendered to full HTML on the server on each request and sent to the browser. The browser shows content immediately (First Contentful Paint) and then adds interactivity (hydration). Static Site Generation (SSG) generates all HTML at build time; pages are served as static files from a CDN. ISR (Incremental Static Regeneration) is a hybrid: statically generated pages are regenerated in the background after a set interval. Modern meta-frameworks like Next.js, Nuxt.js and Astro support all three and allow per-page configuration.
How does SSR / SSG work?
With SSR the browser requests a page, the server renders it with current data, sends full HTML and the browser displays it. Then the browser loads JavaScript and makes the page interactive (hydration). With SSG every page is built at build time with the data available then and served as static files. No server processing on request. ISR combines both: pages are initially static but periodically regenerated with fresh data.
Practical Examples
An e-commerce shop uses SSR for product pages so price and availability are always current and search engines get full HTML.
A company blog uses SSG because content changes rarely – static pages load in milliseconds and are served globally via CDN.
A news site uses ISR with Next.js: articles are statically generated and refreshed in the background every 60 seconds.
A marketing site uses Astro with SSG for maximum performance and a top Lighthouse score.
A dashboard uses SSR for the initial view and client-side rendering for real-time chart updates.
Typical Use Cases
SEO-critical sites (corporate, blogs, landing pages) benefit from pre-rendered HTML
E-commerce uses SSR for up-to-date product data and fast load
Content-heavy sites use SSG for minimal load time and maximum availability via CDN
Web apps combine SSR for the initial view with client rendering for interactive features
Documentation and knowledge bases use SSG to serve thousands of pages efficiently
Advantages and Disadvantages
Advantages
- Better SEO: Search engines receive full HTML instead of empty JavaScript shells
- Faster First Contentful Paint: Users see content immediately without waiting for JavaScript
- SSG performance: Static pages are served directly from the CDN and are very fast
- Flexibility: Modern frameworks let you mix SSR, SSG and CSR per page
- Better accessibility: Server-rendered HTML works even with JavaScript disabled
Disadvantages
- SSR server load: Every request needs server compute – can get expensive at high traffic
- SSG freshness: Statically generated content can be stale until the next build
- Hydration overhead: After server render the browser must load JavaScript and make the page interactive
- Complexity: Choosing the right strategy per page needs architectural understanding
Frequently Asked Questions about SSR / SSG
When should I use SSR and when SSG?
Which framework is best for SSR/SSG?
What is hydration and why does it matter?
Related Terms
Want to use SSR / SSG in your project?
We are happy to advise you on SSR / SSG and find the optimal solution for your requirements. Benefit from our experience across over 200 projects.