Suggest an edit

Improve this article

Refine the answer for “Client-side vs server-side routing”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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).

Markdown · drag & drop images · ⌘B / ⌘I shortcuts533 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.