Client-Side Routing vs. Server-Side Routing with React Router

If you are going to be building websites, it's clear you will need to learn routing. It is fundamental in web development and nearly every site you visit will change it's URL as you navigate through the site. When first learning React and creating single page applications, you will see that creating routes is not required to make a functional application. However, once you discover routing, you will never not use it again.

While all websites are connected to a server and a lot of the time routing is handled server-side, frameworks like React have great ways to also handle routing client-side.

So, what is routing?

Routing is the mechanism by which requests are routed to the code that handles them. These requests are specified by a URL and protocol method(HTTP). Essentially, you the router will determine what will happen when a user visits a specific URL.

Sound familiar? We see this every day when browsing the internet.

Server-Side Routing

Server-side routing is still the most common way of handling requests.
Server-side routing looks like this:

• A user clicks a link that requests a new page and new data from the server.
• The server responds with the requested content.
• The content refreshes on the browser.
• The URL is updated to reflect the request and content on the browser.

Client-Side Routing

Client-side routing is when the route is handled by the Javascript that is loaded to the page. It's process differs from server-side routing. Let's take a look:

• A user clicks a link and the URL changes.
• The URL change represents the state change in the application.
• NOTE: The whole page does not refresh. Only the component/data with a state change re-renders.

React Router

When using React, we have access to an amazing library called React Router. React Router allows us to do both server-side and client-side routing.

So which routing method should we use? Well, each has it's pros and cons. There's no best method to how you route, and you will need to decide which method best fits your needs.

Typically client-side routing is preferred for fast routing between components, since less data is loaded on each change. Server-side routing is fast on page load, and you will get the exact data you requested. Most browsers are optimized for server-side routing because it has been the more common method for a longer period of time.

Do you want client-side routing?
All you need to do is install the library and wrap your content in the <BrowserRouter> tag, and then create some Routes.
Then, <Link> is used to set the URL and keep track of browsing history.

Do you want server-side routing?
Instead of wrapping your content in the <BrowserRouter> tag, you need to use the <StaticRouter> tag and use ReactDOMServer.renderToString instead of ReactDOM.render.

For more information, check out the docs: https://reactrouter.com/docs/en/v6