Understanding SSG and SSR
Published on January 20, 2024
Next.js offers different rendering strategies to optimize your web applications. Two fundamental concepts are Static Site Generation (SSG) and Server-Side Rendering (SSR).
Static Site Generation (SSG)
With SSG, the HTML for your pages is generated at build time. This means when a user requests a page, the server can immediately send the pre-built HTML file.
Pros:
- Extremely fast load times.
- Reduced server load.
- Great for SEO.
- Can be hosted on CDNs.
Cons:
- Requires a rebuild to update content (though Incremental Static Regeneration (ISR) can help).
- Not suitable for highly dynamic content that changes frequently per request.
This blog primarily uses SSG via getStaticProps and getStaticPaths to pre-render blog posts.
Server-Side Rendering (SSR)
With SSR, the HTML for a page is generated on the server for each request.
Pros:
- Always serves up-to-date content.
- Good for SEO as search engines receive fully rendered HTML.
- Suitable for pages with data that changes frequently or depends on user authentication.
Cons:
- Slower Time to First Byte (TTFB) compared to SSG as the server needs to generate the page on demand.
- Higher server load.
Next.js allows you to choose the best rendering method on a per-page basis, giving you flexibility.