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?

Intellectuality

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.

Mix

OK, but surely the browser makes a request to the server for each route (unless using #routing)...how does that work? Does the server respond with 404 and then the routing takes over from that point? – Debauch

...Perhaps it does not request the URL from the server, and the routing lib intercepts it - looking in dev tools for one of my apps, it seems no requests for the routes are sent to the server. – Debauch

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.

Renounce

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.

Adventitious

Answer 4

What :

In react the history object takes care of that what it does..it keeps track of all the addresses and the Router defines all the different routes. So Router takes the help of this History object to keep a track of various addresses / History of the current URL and based on that location it serves the appropriate content.

Why :

1. To reduce unnecessary reloads.
2. For better user experience.
3. It's internally handled by JS.

Affixation