Client-side vs server-side routing

ReactJunior~2 min read

In short:

Criterion	Server-side routing	Client-side routing
Where the route is processed	On the server	In the browser (on the client)
What happens when navigating to another page	A new HTTP request is sent to the server -> a new HTML page arrives	The URL changes, but the page does not reload - React itself updates the needed component
Number of HTML pages loaded	Each route has its own page	One page (`index.html`) for all routes
Navigation speed	Slower (a server request every time)	Instant (everything is already loaded in the browser)
SEO (search engine optimization)	Excellent - content is available immediately	Problems without SSR (search engines see an empty `<div id="root">`)
State management	Each navigation creates a new page state	The React app's state persists across navigations
Example	A classic PHP, Django, or Rails site	A React SPA with `react-router-dom`

An example to understand the difference

Server-side routing (a classic site)

javascript

User -> clicks "About us"
↓
The browser sends a GET /about request
↓
The server returns the about.html page
↓
The browser fully reloads the page

Each page is a separate request and a separate HTML page.

Client-side routing (React SPA)

javascript

User -> clicks "About us"
↓
React Router changes the URL to /about
↓
React renders the <About /> component without a request to the server
↓
The page does not reload

There is only one HTML page (index.html), and all page switching happens inside the React app.

An example of the difference in code

Server-side routing (for example, in Express):

javascript

app.get('/about', (req, res) => {
  res.sendFile(__dirname + '/about.html');
});

Client-side routing (React Router):

javascript

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

Technical differences

Aspect	Server-side	Client-side
URL handling	The server parses the `/about` path and decides what to return	JS in the browser intercepts navigation and decides which component to render
Requests to the server	Each navigation = a new request	Only one request when the app loads
Browser history	Managed by the server	Managed through the History API (`pushState`, `replaceState`)
404 errors	Configured on the server	Must be handled in the client-side router (`<Route path="*">`)

A combined approach

Many modern frameworks (for example, Next.js, Remix) use a hybrid:

The server renders the first page (SSR) -> for SEO and a fast first load.
Further navigations are performed on the client (SPA routing).

This gives you the best of both worlds - fast navigation and good SEO.

Summary:

Server-side routing - the server decides what to send the user on every navigation. Client-side routing - the browser manages navigation itself, without asking the server for new HTML.

React uses client-side routing, while SSR frameworks like Next.js use a hybrid (server-side + client-side).

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.