Recently, a lot of technological questions regarding the method of building websites and web applications have appeared on Polish groups. As it turns out - the enormity of possibilities that technology gives us very easily leads to confusion, as a result of which we use complex tools for relatively simple solutions.

In today's article I will describe basic ways of rendering the Internet. I will explain what static pages, SSR and SPA are, describe their pros and cons, and also indicate when it is worth betting on a given solution.

Let's start with the immortal solution, i.e. ...

Static website

The simplest example of a static website is a page written in pure HTML. While for simple websites this may be a sufficient approach, creating e.g. a blog in this way could be difficult. Fortunately, today complex websites are not created in this way anymore. It would be incredibly time-consuming and prone to errors, the repair of which would take a lot of time.

Dedicated generators are usually used to create static pages. Their operation is based on a data source and page templates that are to be filled with them. As a result of building such a page the generator "pulls" the entire set of data and generates a page for each record, filling it with data. As a result of such action, we get HTML files ready to upload to the server.

Static websites work great as: landing page, portfolio, blogs, documentations, etc. In short - wherever content is static, a static page will work perfectly.

Pros:

• No problems with SEO,
• Load quickly,
• Do not need JS to work,
• We will host them in static hosting (low cost and ease),
• No direct connection with the data server means high security.

Cons:

• Every content addition requires rebuilding the ENTIRE page (can be time- and resource-consuming with a large amount of content)

For cons, it suited me very much to write "low degree of interactivity / dynamism compared to SPA / SSR". It is worth thinking about it twice, however. At second glance, it turns out that this is not their flaw - it is their characteristic. For this they are the best.

A popular static site generator is Gatsby.js. It works based on React and has a ton of plugins facilitating development.

BTW. this blog is built using Gatsby ;)

SPA - single page application

It is a modern approach to creating web applications (applications, not pages). SPAs are based on a single HTML file constituting the entry to the application and a JS file containing the entire application. Everything that happens inside the SPA is handled using JavaScript. Characteristic for SPA is that there are no page reloads when changing URL - such scenarios are most often handled by in-app routing.

At first glance, it might seem that in such a solution a server is not needed. This is wrong thinking. This type of applications still relies very heavily on communication with the server. It is, however, slightly different than in the case of static pages. SPA do not query the server for HTML files just for data that is needed to display subsequent views. As a result, the page is not reloaded, and the user only sees a spinner loading data. This gives a feeling of "nativeness" of the page - as in the case of desktop or mobile applications.

SPA are ideal where you need to provide the user with a "native" feeling of the application - dynamic views and a high degree of interactivity. Examples of SPA are: Netflix, Gmail, Google Maps.

Pros:

• No reloads provides high comfort of use
• High degree of interactivity
• Relatively simple handling of dynamic data

Cons:

• Difficulties with SEO
• Initial page loading is longer
• Requires JS to work

Currently, the most popular tools for building SPA are React, Vue and Angular.

SSR - server side rendering

Server Side Rendering is a kind of compromise between SPA and a static page. This approach has existed for many years, and for a long time was the only way to inject data from the server directly into the website. The concept became loud again with the arrival of SPA. Wise heads seeing the flaws that SPA entails, harnessed modern front-end frameworks so that they only served to define views generated on the server side. In this way, part of the SPA defects was eliminated and the greater part of responsibility was transferred to the server side.

It is worth knowing that using SSR does not necessarily take away the dynamism of SPA. We can use SSR only for the first render (SEO friendly), and further operation of the application can be in the SPA fashion.

With SSR you can build both simple pages and complex applications. Most often used where content is frequently changed. An ideal candidate to build using SSR is e-commerce.

Pros:

• No problems with SEO,
• Better page positioning,
• Usually faster loading than SPA,
• Lower load on client device than SPA,
• Possible caching of queries on the server side,

Cons:

• Highest server load,
• Necessity to maintain server,
• SSR is the most complex of these 3 techniques (entry threshold).

The most popular tools allowing for creating applications using server side rendering are: Next.js (React), Nuxt.js (Vue), Angular Universal and everyone's known Wordpress.

Summary

Remember that in this case there is no such thing as better or worse tools. They are only better or worse suited to the problem we want to solve. Therefore, it is worth knowing what possibilities we have and consciously make a decision to use this, and not another technology.

Each of these concepts is large enough that it would deserve a separate series. I will certainly write a bit more about them in time. Until that moment I will propose you other sources of knowledge for each of them. You will find them below.

Useful links:

• Article from Google "Rendering on the Web" (recommend!)

Static websites:

• Article by Tomek Dziuda on NoFluff
• Gatsby.js

Server-side rendering:

• Article by Bartosz Szczeciński about SSR
• Next.js
• Nuxt.js
• Angular Universal

Single-page-application:

• SPA on Wikipedia
• React
• Vue
• Angular