7 min

May 19, 2023

A comparison of SSR server-side rendering and SSG and IRS static site generators

We'll discuss the topics of SSR and SSG and learn when it makes sense to use these solutions. We'll start with a historical introduction and then trace their use in practice, using technologies like Next.js and Nuxt.js.

Listen to the audio version of this article.

elevenlabs cover
Loading the Elevenlabs Text to Speech AudioNative Player...

Terms used in the article:

Rendering - graphical representation of digitally stored content in an environment-specific form (e.g., displaying in a browser window, a web page stored in HTM code

SPA - single-page application- a web application or website that uses a single HTML document as a "wrapper" for all web pages and organizes user interaction using dynamically loaded HTML, CSS, JavaScript, usually via AJAX or similar technology.

CSR - client-side rendering. A way of rendering an application in the browser using the DOM model.

SSR -server Side Rendering is a way of rendering, building applications on the server side.

SSG - static site generator. Static site generation is the generation of all the HTML pages of an application when it is run on the server.

IRS - static site generator with regeneration of content that was edited and not all pages.

Static sites in the early days of the Web

At the beginning of the Internet, only static sites were available, nothing was dynamically generated. Ready-made, plain HTML documents were sent to the client.

When a user visited a website, he sent a simple HTTP request to the server, which then responded with tags displayed in the browser.

Later, it became possible to use dynamic rendering and build markup templates like in PHP. These templates allowed the information sent to the HTML client to be filled in. Each HTTP request went through the backend of the page and collected the necessary data. For example, adding elements such as usernames, current dates, database data and others was possible thanks to this. This is what the original server-side rendering (server-side rendering) looked like. The client (browser) asked the server for the necessary HTML code to display, which was generated on the server and then displayed in the browser.

AJAX

With the advent of technology such as AJAX , came the ability to request data asynchronously, without reloading the entire page.

From a user experience (UX) perspective, this was a huge improvement - the annoying page flickering ended. We started moving toward client-side rendering.

In order to simplify frontend work, various libraries and frameworks began to appear. One of the most popular libraries became jQuery , but it was not yet a full-fledged CSR (Client Side Rendering) tool.

SPA (Single Page Application) and CSR (Client Side Rendering).

Then came React, Angular and Vue, thanks to which the vast majority of developers finally became familiar with full-fledged client-side rendering. These three technologies use a component-based approach and allow breaking markup into small reusable parts. Now all HTML generation is done on the user interface. The backend is used only for complex calculations, working with databases, saturating the frontend with data, etc.

Thanks to the ability to easily generate markup on the client side, SPAs have gained huge popularity.

Looking at it technically - now the server started sending almost empty HTML to the client, which contains only basic tags, with an empty <div class='root'></div> and a single script file <script src='bundle.js'></script>, in which would be all the code to generate tags, styles and logic written with JavaScript.

Unfortunately, this approach also led to a number of potential problems:

First, there was the problem of search engine optimization. Since Google's indexing robots read and index web pages, it is necessary to serve content and markup information from the server, and with this approach everything is generated on the client. Search engines were then unable to process the information generated in this way. All the robot could see was the empty main HTML tag.

Now the situation has improved somewhat, as many search robots have learned to perform the JavaScript required for client-side rendering. Nevertheless, the result of such indexing still leaves much to be desired.

The second potential problem is performance. Since a large amount of JavaScript code is required to display the page in the browser, the application can run quite slowly. This is especially noticeable on older mobile devices.

To solve these problems, developers have revisited the idea of generating tags on the server.

Back to server-side rendering

Unlike the old approach, when tags were generated on the server using programming languages (such as PHP) Server Side Rendering will now use modern JavaScript libraries , such as React, just like in CSR.

The only difference is that the application will generate tags using React not on the client side, but on the server side (Server Side Rendering). This solution was designed to fix existing performance and SEO issues.

Every time an indexing robot requests a page, it will get the content it needs - rendering no longer requires JavaScript to run on the client side.

Now, when the term Server Side Rendering is mentioned - it refers to this scenario.

SSR Advantages:

  • SEO

Optimized for SEO: Next.js provides powerful search engine optimization tools to better index user interface pages.

  • FCP (First Contentful Paint)

Server-side rendering makes your site's pages available for interaction faster. With SSR's performance, it can give you an excellent First Contentful Paint , which improves the UX and probably the SEO of your site as well.

  • Ease of use

Creating a website with Next.js is very easy thanks to its component model and routing, which simplify the design process.

  • Suits large projects

SSR was created with the needs of developing large and complex projects in mind. Thus, it can be well suited to projects of different scales, from small websites to large content management systems.

SSR disadvantages:

  • The transition time between pages slows down. Sure, for initial rendering SSR is faster than CSR, but later on when working with an application you have to render data twice, once on the server and once on the client.

  • A more complex development tool. Writing an application only in React combined with Redux, for example, is much easier than adding SSR technology to the stack. This increases the amount of code, increases the difficulty of development and adds additional libraries.

  • Cost. We need a server that is very powerful-usually costs more.

SSG - Static Site Generator

SSG is a new approach to web development that allows you to create websites whose pages are generated in static files at compile time. Thus, when the browser sends a request, the server does not generate the tags, as in the case of SSR, but feeds them ready. It seems that we are back to where we started - the server again provides us with plain HTML and CSS , so what is the difference?

The difference is that instead of using HTML and CSS , we use modern tools such as React , Vue and Angular . This means that an application written in modern tools is converted to HTML , CSS and JavaScript using transpilers, package builders, etc.

Sounds great, but there is a catch. The problem is that SSG does not mean working dynamically with the server, i.e. you cannot, for example, create an online shopping cart using SSG , because the information displayed in the cart must be unique for each user. In this case, we can only use SSR or CSR . And static page generation is convenient, for example, for a "delivery" page or for a product card, that is, for example, for information where the content of the page is identical for each user.

SSG advantages:

  • SEO

As with SSR , the robot receives all the necessary information.

  • Performance

SSG has the highest performance compared to SSR and CSR , because all the data is already generated during installation.

  • Very cheap

Using static site generation , you don't need a server, you just need to upload your site code to github and build it, for example, using Netlify. In this case, you will only have to pay for the domain name.

  • Ease of development

Compared to CSR, SSG is a bit more complicated, but overall the picture is not much different from ordinary development.

  • Security

Your static site doesn't have a server, which means an attacker has no way to access your database or admin panel.

SSG disadvantages:

SSG is more difficult to set up than Wordpress or any other CMS. During the initial setup, most CMSs provide a huge number of tips for getting a site up and running. If you work with a static page generator, you will have to study the documentation.

It only displays static data. You can't display dynamic data with SSG , so you can't build a fairly complex web application.

Fortunately, there is a method called generic rendering that we can use to get the best results and functionalities:

  • Fast and smooth transitions between pages, such as CSR

  • No SEO issues

  • Incredibly fast FCP (First Contentful Paint)

  • Working with dynamic data.

  • Reduction of server maintenance costs.

  • All these features are provided by a platform such as Next.js and Nuxt.JS.

  • IRS - Incremental Static Regeneration (SSG + Data Regeneration).

Next.js allows you to create or update static pages after building a site. Incremental Static Regeneration allows you to benefit from regenerating static content on your site, without having to rebuild your entire site.

With ISR, you can keep the advantages of static pages and only regenerate the content that was edited.

Summary

SSR allows the generation of a server-side page, which means that the user gets a page ready to view, rather than having to wait for client-side data retrieval and processing.

SSG, on the other hand, allows for the generation of static pages, which means that the page is ready for the user to view without the server having to download and process data. This also speeds up page loading and improves the user experience.

Therefore, choosing between CSR, SSR and SSG - this is an important decision for business, as they affect performance, user experience and search engine positioning of the site, which has a direct impact on the business success of your online business.