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.
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.
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:
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)