DEV Community

Cover image for Server Side Rendering (SSR) Vs Static Site Generation (SSG)
NJOKU SAMSON EBERE
NJOKU SAMSON EBERE

Posted on

Server Side Rendering (SSR) Vs Static Site Generation (SSG)

Server Side Rendering (SSR) and Static Site Generation (SSG) are terms used to describe how web pages are generated and rendered. This article explains the difference between both terminologies and when best to use each one.

Server Side Rendering

SSR refers to when a webpage is generated each time a user requests it. In other words, a page returned to the user at request time is a server-side rendered webpage.

Server Side Rendering (SSR) description

Nextjs provides the getServerSideProps method to make it easy to do SSR out of the box.

When is the best time to use SSR?

  • SSR is best when rendering complex pages with dynamic contents such as authentication data.

  • It is also the best when it comes to SEO.

Static Site Generation (SSG)

SSG is a method used to generate webpages at build time. The pages are then re-used each time a user requests them.

Static Site Generation (SSG) description

The getStaticProps method is used for SSG in Nextjs.

When is the best time to use SSG?

  • The best time to use SSG is when a webpage has less dynamic data. For example, a blog post page.

  • SSG provides better load time since the pages are already generated.

Summary

The image below outlines the difference between SSR and SSG:

Difference between SSR and SSG description

Conclusion

The article aimed to clarify the difference between SSR and SSG.

It defined each concept and provided the best cases for all of them. It also introduced you to the Nextjs methods for handling SSR and SSG.

I encourage you to look more into the documentation and explore code samples and other use cases.

Top comments (0)