Static site generation (SSG) and server-side rendering (SSR) are gaining popularity as ways to optimize performance. More the developers getting the offer of a wide range of digital initiatives, businesses are working hard not only to find visitors but also they want to keep users engaged. Modern web development becoming complex.
The terms SSR, SSG and SPA are for sure confusing. Learning about SSR and SSG can help both the new developers and the businesses to compare the possible options for enhancing the user experience. This article will explain the basics of SSR and SSG, and try to orient to the various factors businesses should consider when choosing how to render web pages. The competition for getting clicks is becoming challenging and thus speed gaining more importance in gaining conversions.
|Table of Contents|
What are React.js and Next.js?
In today’s world, Next.js is one of the most widely-used React frameworks. It is a consolidated framework and can be used to build amazing web applications.
There are numerous advantages of using Next.js which can be mentioned. It offers us a good performance, better SEO, supports TypeScript, smart bundling, and route pre-fetching are just some of the reasons we need to incline towards Next.js.
Next.js has a powerful ability to use different pre-rendering techniques. That is why in this article we are discussing Static site generation (SSG) and server-side rendering (SSR).
Click here for full size image
Choosing Between Static Site Generation (SSG) Vs Server-side rendering (SSR)
In SSG (Static Site Generation), the web page is generated in the server, however, the page is rendered during the build. Hence, upon the receiving of a request for a webpage, the rendered page already rendered in the server is served to the client. Static website generators are nothing new for developers, yet Next.js can do it well.
In SSR (Server-Side Rendering), when a web page is requested, it is rendered on the server. Then it is served to the client. Finally rendered by the client’s browser.
Here is a dedicated article on the topic of SSR vs SSG, where you compare the pros and cons of each.
Use-cases of Server-side rendering (SSR) are not restricted to web apps. Server-side-rendering is becoming a common pattern in web development. Previously Ruby on Rails and Django used SSR to dynamically populate HTML templates. That is great to deliver the web pages of a blog faster to the readers – the article header and body only required to be changed. SSR can be used with limitations within PHP too. CSR is social media friendly, it updates the webpage on the fly but slow TTFB, lack of support of conventional CDNs restrict its wide usage to web apps.