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?
React is a Javascript software library that provides a basic framework for the output of user interface components of web pages and web apps. Components are structured hierarchically in React and can be represented in its syntax as self-defined JSX tags. The react model promises the simple, yet the high-performance structure of even complex applications through the concepts of the unidirectional data flow and the “Virtual DOM”. React typically forms the basis for single page web applications but can also be (pre-)rendered with server-side Node.js.
Next.js is a free and open-source framework based on the React3 JavaScript library and Node.js technology. The framework makes it possible to create universal or sometimes called isomorphic4 web applications, meaning that the source code is shared between the client and the server, as do its competitors. Next.js supports server-side web page rendering techniques (SSR: Server Side Rendering), and static web page rendering (SSG: Static Site Generation). It also supports hybrid web page and/or incremental page generation (ISR: Incremental Static Generation), making the framework capable of statically rendering application web pages during initial page generation, but also to be able to regenerate a page when a user visits it and its content has changed between the moment the site was generated and the moment a user visits the same page again. Thus, the page concerned will be regenerated for the user when he consults it with the server-side rendering technique. The page thus regenerated will be stored in memory on the server and delivered statically to the users, allowing it to be delivered more quickly, until a new update of the page data.
Why 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.
