SPA and Rendering Methods
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.
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.
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 🙂
MPA or SPA is about user interaction on the website.
Rendering methods are about populating the first HTML page sent to the user.
Let’s take a look at all the possible combinations.
SPA and CSR
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.
|SPA||create-react-app||NextJS + Vercel||Gatsby|
|MPA||-||Beginning of Web 2.0||Web 1.0|
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 🙏
Thanks for reading, don't be a stranger 👋
GIMTEC is the newsletter I wish I had earlier in my software engineering career.
Every other Wednesday, I share an article on a topic that you won't learn at work.
Join more than 5,000 subscribers below.