Not all websites behave in the same way. Web development has been constantly evolving and in the years many libraries and frameworks came out, providing new approaches and techniques to develop web applications.
A modern approach which has gained popularity in the last years is the Single Page Application model. Single Page Applications have become quite popular thanks to libraries and frameworks like React, Angular and Vue, which adopt their principles as their default behavior.
This article will be an overview of what Single Page Applications are, how they differ from traditional websites and how they work behind the scenes.
Traditional websites are made of multiple pages, which the browser downloads as the user visits different parts of the website.
Any time the user clicks on an internal link, the url changes and a new page is requested to the server. The server responds with an HTML file containing exactly the content of the requested page, which is then rendered by the browser.
You can notice that any time the url changes a loading spinner appears next to the document title. This shows that a new page is being requested and then loaded by the browser.
Single Page Applications
A Single Page Application (or SPA) is a web application which can be used and consulted from a single page.
This doesn't mean that they can't have multiple sections like an Homepage, About page, etc..
It means instead that a SPA only requests to the server a single page. And no matter how many links we click to navigate the website. No other page will ever be requested other than the first one, because it is always the current page which is dynamically rewritten in response to user actions.
On the other side we have Server Side Rendering, where the server generates the HTML that makes up the page, and sends it to the client ready to be rendered.
What SPAs are made of
We've covered in general how a SPA works, but let's understand in more detail what happens behind the scenes.
When we visit a SPA, the server responds with a single HTML file, which is almost empty. It doesn't contain any content about the page being visited, but only the skeleton of a typical HTML document and a few more things.
It could look something like this:
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="An awesome single page application" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>My Single Page App</title>
You can notice a few elements which may look not very obvious at first. Let's uncover what they do:
Finally, at the end of the body, a SPA contains one or more
All the logic that will handle the generation of the UI resides inside them.
This is what happens. When the browser receives the HTML file from the server it will start parsing it, but nothing will be actually displayed, because the file doesn't contain content at all. When the
root div container with content.
// Create the element
const button = document.createElement('button')
button.innerText = 'I am a button!'
// Add some styles
button.style.backgroundColor = '#3372d6'
button.style.color = '#ffffff'
button.style.padding = '10px'
button.style.borderRadius = '8px'
button.style.border = 'none'
// Append it to the container
const container = document.getElementById('root')
And this is what the result would look like:
React is my personal favorite choice. The React team has also made a tool called Create React App, which let's you create a SPA very quickly and with zero configuration.
Some pages require to visualize some information dynamically. Their content is not always the same, but depends for example from data saved in a database, so it can possibly change on every request.
In traditional websites the server takes care of this. When the page is requested by the client, the server queries the database (or whatever the source of the data is) and populates the page with the obtained data. Then it sends the page to the client, which only has to concern about rendering it.
This will typically require some sort of loading screens, to handle temporarily absence of data, while it is being obtained from the server.
Pros and Cons
Now that you know what a SPA is, and how they work, let's see which are some pros and cons of using them.
Pros of SPAs
- They have an extremely reactive behavior to user interactions, which gives them an almost native feeling, resulting in great UX.
- Less traffic and workload for the server, which doesn't have to handle page generation, and only has to send a single HTML file to the client.
- They allow to better decouple frontend and backend, UI and data. The server isn't concerned about generating UI, but only needs to respond with data when it is requested.
Cons of SPAs
- The first load could be very slow, because the browser downloads the whole application in one shot, event if the user will only visit a single section of the website.
- It's complicated to optimize them for good SEO.
We've covered quite a bit of how SPAs and traditional websites work.
I now encourage you to start paying attention on what happens on the sites that you visit, and see if the principles of SPAs apply or not.
For example, what happens when you click on a link? Does a loading a spinner appear? Or it switches to a new page with an extremely fast transition and no loading at all?
You can also try to inspect the page source code (on Chrome you can use Ctrl+U / Cmd+Opt+U). Does it contain the content that you actually see on the page? Or just a bunch of weird named scripts?
The Network tab of browser Developer Tools is another great place to find out what's going on in a website. Do you ever see an HTML document being requested after the first load?
All these questions lead you to the answer of whether you are visiting a SPA or not, and help you to understand what the websites that you visit are doing behind the scenes.
Knowing how websites work is essential to develop better web applications, and being aware that not all of them behave in the same way is part of that. I think it is important to know the various mechanisms and approaches that exist, and that we have at our disposal, so we can make the choice that better fits our needs.