Single Page Application Routing
Oversimplified.
Routing in single paged web applications has been somewhat of an enigma, especially if you are a new web developer or just a backend developer used to returning different HTML pages depending on request parameters from the client. Questions such as how the client site is changing UI without any request to the server and how the browser tab URL changes without reloading arise.
With that being said, let's get into how this is achieved. Keep in mind my method of building an SPA server is not gospel; it is how I understand them at the moment of writing this article, but I do wish you pick up the core concepts and attempt to build your own SPA with routing, keep use of libraries at the minimum, let your imagination run wild 😜.
How do they really work?
Short answer:
My kind of answer:
In most old websites, you will notice every time you want to change scenes/pages, a request is made to the server to send a new HTML file. Some send the same HTML file but change its contents before sending it back to you. Single page applications send you the HTML file from the server once. Most single page application architectures send you an HTML file, which is just a canvas for the JavaScript code. meaning there is nothing on the HTML but just the boiler HTML code you can auto-generate on your IDE👇.
I am not saying all SPA libraries and frameworks use this pattern. I merely mention what I noticed from the ones I am used to (Angular And React). I have also done this when building my own, having the main.js script wait for the DOM content to load before it dances on the canvas (i.e., tell the browser what to render depending on the URL).
Now, routing is essentially what I just said above, telling the DOM what to render; the example I provided shows routing as switching div elements below the Navbar. That is simply because I was making an example and not a React Router clone 👀, but in most single page code bases, there is a dedicated section for routes to be rendered.
In Angular, for example, you will find:
<router-outlet></router-outlet>And in React:
<Routes>
...
<Routes>Your clients will know they’ve routed once the browser URL changes. After all, routing aims to give an illusion you are changing pages/HTML files when requesting new content. So it makes sense why most programmers change the browser URL when the act of “Routing” is asked for.
This is how most programmers, including myself, change the browser URL:
history.pushState({}, "", 'your-route-link')If you’d like to read more about the function above, here is the link
NB: Changing URLs when routing in single page applications is not just about emulating multi-paged websites. There are a lot of benefits that come with that. One is that when a user is given the illusion they switched pages, they are bound to try and navigate back or forward. For example, if you are building an e-commerce site, users might want to share links to the product they are trying to purchase with their friends. It helps with that, too. Even if routing is just a js file changing contents of one HTML file, you are still giving users an illusion of page changing, so you must cater to that. Remember, the best illusions are the ones created from an understanding of what it is that is being simulated.
Conclusion
In a way, yes, but keep in mind routing is the most crucial part of most single paged apps out there, so since I couldn’t find more words to explain routing without overcomplicating it, I made the video to show you how to build your own with NodeJS.
Here is the link to the source code discussed in the video: https://github.com/Andries-Omega/SinglePageWebsite
