CODEWITHSUNDEEP
node.jsexpressreactjsurl-routingreact-router
user235692
user235692

Reputation: 327

What is the purpose of React Router?

Given that we can do routing with Express on the server, why do need a client side router? What are the benefits, and is it only significant to SPA?

Upvotes: 8

Views: 984

Answers (2)

Sanyam Agrawal
Sanyam Agrawal

Reputation: 159

Client side routing is required to keep your application in sync with the browser URL.

It is mainly useful for Single Page Applications (SPAs) where the backend will be used for RESTful API calls via XHR or AJAX calls.

Being an SPA, users can bookmark your URL, and when they hit the URL again, your application should load that page with the data and its state.

The main difference between Server side routing and client side routing:

  1. In Server Side routing you download (serve) the entire page.
  2. In client Side routing along with the entire page, you can serve a specific portion of a page, reuse the DOM, manually manage the URL and history states. eg.

www.something.com/page1/tab1 will show tab1 in the UI
www.something.com/page1.tab2 will show tab2 in the UI

In this way, the url can get more complex and you can have sub-routes with states.

Upvotes: 4

Zlatko
Zlatko

Reputation: 19588

Those who need a client-side router, need it for state management. Say you have server-rendered pages, but with some client-side widgets - e.g. a calendar, set of filters or collapsed or open sidebar. Router helps you initialize these components of the page in the exact state you want them. Granted, you could do most of it and all of the use cases I've named on the server, too. But it's usually a lot easier to handle these on the client. You might render it faster on the server, but sometimes, especially when doing partial page updates, it's cheaper and faster to handle that client-side.

Upvotes: 0

Related Questions