When I first started learning React, every friend and every YouTube tutorial seemed to say the same damn thing:
"React is used to build Single-Page Applications (SPAs)!"
I'd always pretend I actually knew what a Single-Page Application was, because who wants to sound dumb, right? Honestly, it reminded me of when I'd say, "An object is an instance of a class" without really understanding what it meant. :')
I would like to tell you, dear reader, after some Reddit scrolling and LLM-ing (or as the common person says, "ChatGPT-ing"), I finally figured it out! And if you've ever been confused about Single-Page Applications or are just curious, I hope this little blurb helps clarify things.
But before we can really get to understanding what Single-Page Applications are, we need to take a detour and understand Multi-Page Applications (MPAs).
Multi-Page Applications (MPAs)
Let's pretend that "blahblahblah.com" (yes, I could not come up with a better name) is a traditional application.
Here's what will happen when you go to blahblahblah.com on your device/browser (the client):
1. When the page initially loads
When you first visit blahblahblah.com, your browser (the client) will send a request to blahblahblah.com's server for the homepage.
Once the server receives the request, it gets to work, gathers everything it needs, such as HTML, CSS, JavaScript, and maybe some data from databases or APIs. Once it's got everything ready, it bundles it up and sends a fully rendered homepage in the form of an HTML file back to your browser.
2. Navigating to Another Page
Now let's say you head to the About page of blahblahblah.com. Your browser will send another request to blahblahblah.com's server. The server repeats the same process, builds the About page from scratch (HTML, CSS, JS, data), and sends the resulting About page as an HTML file back to your browser.
When your browser receives the About page, it throws out the previous homepage and fully replaces it with the About page. Everything reloads from scratch.
3. Returning to Home Page
Now, when you navigate back to the homepage, the whole process repeats: another request, another page rebuild, another full reload in your browser.
Moreover, most pages like Home, About, and Contact share common elements like headers and footers, but the browser still reloads everything each time.
This constant back-and-forth, where the browser requests an entirely new HTML file from the server for every single "page" change , is the essence of Multi-Page Application (MPA) architecture.
The clearest sign you're dealing with an MPA is the brief flicker or white screen you see during navigation as the browser unloads the old page and loads the new one.
Now as you can tell there are some obvious flaws with MPA, such as:
- Re-rendering the same shared content, repeatedly
- Extra server requests
- Increased load time and heavier server strain
So how are single page applications different? Well…
Single-Page Applications (SPAs)
Here's the Twist:
A Single-Page Application doesn't actually mean you're stuck with a never ending page. 😅
Instead, the whole starts pretty much with the same process as a multi-page application: you open your browser and head over to blahblahblah.com, and your browser asks the server for the site.
Now, here's the important part: remember how in multi-page applications, every time you went to a new page, your browser would send a new request to the server and the server would build the page on its end and send the whole thing back?
Well, in a Single-Page Application, on that very first request, the server hands over a single HTML file, along with the entire application bundle (the core JavaScript, CSS, and framework code like React).
This entire application framework loads into your browser, and from then on, when you "navigate" to a new section (like About or Contact), the JavaScript on the client-side simply intercepts the request and dynamically updates the view without a full page reload
Now, the browser isn't totally disconnected from the server, it still fetches just the right bits of data as needed. All of this adds up to fewer server requests, less repeated content, and smoother navigation for users.
And…. that's Single Page Applications architecture for you!
Now, despite all the cool stuff SPAs have to provide, I still have some lingering questions, for example, what if only part of the app was sent, or if super-frequently visited pages could be delivered separately to make things even faster? There's clearly plenty more to learn.
If you've wondered about SPAs and MPAs too, or just want to share your thoughts, feel free to reach out on X or LinkedIn. It's always good to swap ideas with others on this stuff.
xoxo! :)
Top comments (0)