JS Funda: Client-Side Routing and The History API

Mayank Chaudhari
6 min readSep 17, 2022
Client-side routing makes your page transitions smooth like cutting butter

Ever wondered how popular front-end frameworks and libraries like Nuxt.js, Next.js, Angular, Vue Router, React Router, etc. handle SPAs (Single Page Applications) and make page transitions quick and efficient? And can you do the same using vanilla JS?

If you are interested in mastering the modern web frameworks, check out my courses here and avail great discounts and offers. You might get some for FREE as well.

Here in this post, we will see what client-side routing is and a crude way of creating your own client-side routing mechanism. This will help you understand the essential principle behind client-side routing.

First of all, what do we mean by routing in the context of a website or a web app? It simply means moving (routing) from one page to another page. Depending on the mechanism used for this routing, it may be called, server-side or client-side routing.

What Is the Difference Between Server-Side and Client-Side Routing?

Client-side routing is similar to server-side routing; however, it is performed in the browser.

A typical web application contains numerous pages that map to different URLs, and each page contains some logic and a template that is then rendered.

Client-side routing simply executes this procedure in the browser, employing JavaScript for logic and a JS-based template engine or other similar ways to render the pages.

It’s most commonly used in single-page apps, where the server-side code is largely utilized to provide a RESTful API that the client-side code consumes through Ajax.

Server-side routing

In server-side routing, a user clicks a link that requests a new page or new data from the server (another computer). The user is then served new data or documents.

Let’s break this down even further:

When a user clicks on a link on a website, another entire page is loaded and displayed on the screen. The URL route is modified to reflect the user’s current location on the web page.

The server is responsible for loading and rendering the “whole page.” Because we are…

--

--

Mayank Chaudhari

Technical Writer | Developer | Researcher | Freelancer | Open Source Contributor