Diving into ReactJS: Understanding the Magic Behind Client and Server-side Routing.

#react #javascript #webdev #beginners

What is Routing?

Routing in React.js refers to the process of managing navigation within a single-page application (SPA). In traditional multi-page web applications, each page corresponds to a different URL, and navigation between pages triggers a request to the server for a new HTML page. However, in SPAs built with React.js, all content is rendered on a single HTML page. Routing allows you to define different “routes” within your application based on the URL, so that different components are rendered based on the URL without a full page reload. This gives users a seamless browsing experience similar to traditional multi-page applications.

I’ll utilize the browser devtools to explore deeper into this article. Feel free to use any browser you prefer, but I’ll demonstrate using the Chrome browser. Simply right-click with your mouse or trackpad, select ‘Inspect,’ and then navigate to the Network tab.

What is Client-Side Routing?

Client-side routing refers to the management of page navigation or switching within the browser itself. For instance, when a user clicks a link that modifies the URL, the browser updates it without contacting the server, thus avoiding a full page refresh. This approach enables swift page transitions, with React Router being a widely used library for implementing client-side routing. To gain a better understanding of the client side, let’s begin by installing the React Router DOM package:

npm install react-router-dom

Once installed, import BrowserRouter from react-router-dom into your main.jsx file and enclose it around the parent component:


import { BrowserRouter } from “react-router-dom”;

<BrowserRouter>
   <App />
<BrowserRouter>

In the App component file, import Routes and Route from react-router-dom. To structure our routing page, let’s create a folder named components. Inside this folder, create two files: Home.jsx and RoutingExample.jsx, then import them into your App.jsx file. Wrap the files routing page inside the Routes property:


import react from “react”;

import { Routes, Route} from “react-router-dom”;
import Home from “./components/Home;
import RoutingExample from “./components/RoutingExample”;

const App = () => {
  return (
    <>
     <Routes>
       <Route path=“/“ element={<Home />}
       <Route path=“/routing-example“ element={<RoutingExample />/>
     </Routes>
    </>
)
}

Within the Home component, create a link that navigates to the RoutingExample page. Utilize the Link tag provided by react-router-dom:


import React from “react”;
import { Link } from “react-router-dom;

const Home = () => {

       return(
       <>
           <Link to=“/routing-example”>Client-side Routing</Link>
       </>
)
}

Remember the network tab I mentioned earlier? Let’s revisit it. On the count of one, two, three, click the link. Did you notice anything? Nothing happens inside the network tab that is no contact was made with the sever. The client-side routing ensures faster navigation between pages which made react router dom a widely used routing library.

Server-side routing on the other hand is managed by the server. When a user clicks a link, the browser sends a request to the server, which in turn responds with the relevant HTML page, leading to a complete page refresh. An example of this is the HTML anchor tag. This routing approach can lead to slower navigation due to the round-trips to the server involved. For server-side routing, you’ll need to utilise the HTML anchor tag. Begin by creating an index.html and routing.html file in your visual studio code or any code editor of your choice. In the index.html file, create a link using the traditional anchor tag with “Server-side Routing” as the inner text:

<a href=“routing.html”>Server-side Routing</a>

Return to your browser and revisit the network tab. Click on the link, and you’ll notice something remarkable: a full page refresh occurs before navigating to the routing.html page. This action triggers a request to the server, which then responds by providing the requested page.

In summary, client-side routing optimizes user experience with faster transitions and interactivity, while server-side routing focuses on SEO, initial load times, accessibility, and security. Combining both approaches can create a comprehensive solution that balances performance, SEO, and user experience.