SPA and Rendering Methods

Single Page Applications and rendering methods address different problems in web development.

TLDR;

Single Page Applications and rendering methods address different problems in web development.

Most tutorials or frameworks couple both things together; one can easily misunderstand the limits of one and the other.

What Is a Single Page Application?

Wikipedia gives us an excellent definition:

“A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages.” Wikipedia

Examples of popular SPAs are Gmail and Twitter.

Multiple Page Application

The opposite is an MPA or Multiple Page Application. An MPA refreshes the whole page to show new data to the user. Examples are many forums or e-commerce sites.

Middle Ground

Yet, not everything is black or white. Most applications are in a middle area where some actions need a whole refresh while other interactions happen immediately in the browser.

Rendering Methods

There are three main rendering methods.

• Client-Side Rendering (CSR)

• Server-Side Rendering (SSR)

• Build-time Rendering

For a further explanation, refer to my previous article on rendering methods 🙂

Two Problems

MPA or SPA is about user interaction on the website.

Rendering methods are about populating the first HTML page sent to the user.

Combinations

Let’s take a look at all the possible combinations.

SPA and CSR

The server returns an empty HTML page that is then populated by the client once the JavaScript file is loaded. This is the default when using create-react-app.

SPA and SSR

The server renders a populated HTML page and sends it to the client. This example is the default of NextJS using Vercel.

Yet, once the application is set up (the JS is loaded), there is no difference between CSR and SSR.

SPA and Build-time Rendering

This is similar to CSR, but the pages are created and populated when the app is built. The build step might run once every day or on every content change. On the other hand, in SSR, the page is populated on every request.

Nevertheless, a SPA can still be developed like this. Imagine that all the populated HTML files point to the same JS file.

MPA and CSR

This is not possible. By definition, the pages in an MPA are already populated and don’t need to be rendered in the client.

CSR means requesting data and then using JS to show it. But MPAs use a whole site refresh to show new data.

MPA and SSR

Most websites at the beginning of Web 2.0 were MPA with SSR. On every user navigation, the browser gets a new HTML page.

MPA and Build-time Rendering

This works only for content sites that don’t allow user data. Like websites from the beginning of the internet, when content was static and users couldn’t create content.

Examples Table

CSR SSR Build-time SPA create-react-app NextJS + Vercel Gatsby MPA - Beginning of Web 2.0 Web 1.0

Recap

Let’s repeat ourselves:

MPA or SPA are about user interaction on the website.

Rendering methods are about populating the first HTML sent to the user.

---

If you like this post, consider sharing it with your friends on twitter or forwarding this email to them 🙈

Don't hesitate to reach out to me if you have any questions or see an error. I highly appreciate it.

And thanks to Bernat, Michal and Sebastià for reviewing this article 🙏