What is client-side routing and how is it used?

Question

I will be glad if someone could answer the following questions

1. How does it work?
2. Why is it necessary?
3. What does it improve?

Answer 1

Client side routing is the same as server side routing, but it's ran in the browser.

In a typical web application you have several pages which map into different URLs, and each of the pages has some logic and a template which is then rendered.

Client-side routing simply runs this process in the browser, using JavaScript for the logic and some JS based template engine or other such approaches to render the pages.

Typically it's used in single page applications, where the server-side code is primarily used to provide a RESTful API the client-side code uses via Ajax.

Answer 2

I was trying to build a Single page application and came to know about client side routing.

By implementing client side routing I was able to achieve the following

1. The front and back buttons in the browser started working for my single page JavaScript application. This was very important while accessing the page from a mobile browser.
2. The user was able to Bookmark/share a URL which was not possible earlier.

Answer 3

I know that it's late but I have some information about how the client side routing (CSR) works. This answer does not try to provide a full js implementation of client side routing but rather tries to shed some light on what concepts will help you implement one of your own. It's true that when user click an anchor tag, the browser sends a request to the server. But we will be able to intercept the event and prevent it's default behavior, i.e sending a request to the server by using "event.preventDefault();". Below is snippet from React routers web page.

<a
  href="/contact"
  onClick={event => {
    // stop the browser from changing the URL and requesting the new document
    event.preventDefault();
    // push an entry into the browser history stack and change the URL
    window.history.pushState({}, undefined, "/contact");
  }}
/>

Also listening to forward/backward button click is important. This can be done by,

window.addEventListener("popstate", () => {
  // URL changed!
});

But looking at the above two snippets you can imagine how a CSR could be implemented. There is much more to it. That's why libraries like React Router exists and web frameworks like angular provide CSR by default.

If you want more information please visit the link below, it will take your the concepts page of react router.

https://reactrouter.com/docs/en/v6/getting-started/concepts

Also if you want to get more depth into the topic your could check out the code of Angular router. Comparing the two implementations will give a much more insight.