Close Menu
    Explore the coolest frontend learning platform !
    Visit NamasteDev
    Thursday, April 3

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

    Article 769 Comments4 Mins ReadKehinde YusufBy

    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 “./componentsr/RoutingExample”; 

const App = () => { 

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

export default App

    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> 
</>
 ) 
}

export default Home

    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.

    What Is Server-Side Routing?

    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 TheVc 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.

    Keep Reading

    View 769 Comments

    769 Comments

    301. Perrywaifs on

      pharmacie en ligne sans ordonnance [url=https://pharmaciemeilleurprix.com/#]pharmacie en ligne france[/url] pharmacie en ligne pas cher

      Reply
    614. Josephtex on

      Казино — РјРёСЂ азартных приключений.: balloon game – balloon казино

      Reply
    615. Davidboype on

      balloon казино играть balloon game Автоматы Ballon поражают своей красочностью.

      Reply
    619. Davidboype on

      balloon казино демо balloon game Выигрывайте большие СЃСѓРјРјС‹ РЅР° автоматах!

      Reply
    625. Jessevox on

      Играйте СЃ СѓРјРѕРј, РЅРѕ РЅРµ забывайте Рѕ веселье.: balloon game – balloon казино играть

      Reply
    714. Nirav on

      This article gives a very clear explanation of client and server-side routing in ReactJS. I appreciate how you broke down the concepts for beginners and advanced users alike. By the way, if anyone is ever looking for advanced eye care, The Eye Foundation is a highly reputed Eye Hospital in Bangalore
      offering excellent treatment options.

      Reply
    Leave A Reply

    Demo

    Courses

    Community

    Contact Us