Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Клієнтський VS серверний роутинг». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Коротко:

| Критерій | **Серверний роутинг (Server-side routing)** | **Клієнтський роутинг (Client-side routing)** |
|---|---|---|
| Де відбувається обробка маршруту | На **сервері** | У **браузері (на клієнті)** |
| Що відбувається при переході на іншу сторінку | Відправляється **новий HTTP-запит** до сервера -> приходить **новий HTML** | **URL змінюється**, але сторінка **не перезавантажується** - React сам оновлює потрібний компонент |
| Кількість завантажуваних HTML-сторінок | Для кожного маршруту - своя сторінка | Одна сторінка (`index.html`) для всіх маршрутів |
| Швидкість переходів | Повільніше (щоразу запит на сервер) | Миттєві (все вже завантажено в браузері) |
| SEO (пошукова оптимізація) | Відмінна - контент доступний одразу | Проблеми без SSR (пошуковик бачить порожній `<div id="root">`) |
| Керування станом | Кожен перехід створює новий стан сторінки | Стан React-застосунку зберігається між переходами |
| Приклад | Класичний сайт на PHP, Django, Rails | React SPA з `react-router-dom` |

---

## Приклад, щоб зрозуміти різницю

### Серверний роутинг (класичний сайт)

```javascript
Користувач -> натискає "Про нас"
↓
Браузер надсилає запит GET /about
↓
Сервер повертає HTML-сторінку about.html
↓
Браузер повністю перезавантажує сторінку
```

Кожна сторінка - **окремий запит і окремий HTML**.

---

### Клієнтський роутинг (React SPA)

```javascript
Користувач -> натискає "Про нас"
↓
React Router змінює URL на /about
↓
React рендерить компонент <About /> без запиту до сервера
↓
Сторінка не перезавантажується
```

Загалом **один HTML (index.html)**, а все перемикання сторінок відбувається **всередині React-застосунку**.

---

## Приклад різниці в коді

### Серверний роутинг (наприклад, в Express):

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

### Клієнтський роутинг (React Router):

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

---

## Технічні відмінності

| Аспект | Серверний | Клієнтський |
|---|---|---|
| Обробка URL | Сервер аналізує шлях `/about` і вирішує, що повернути | JS у браузері перехоплює навігацію і вирішує, який компонент відобразити |
| Запит до сервера | Кожен перехід = новий запит | Тільки один запит при завантаженні застосунку |
| Історія браузера | Керується сервером | Керується через History API (`pushState`, `replaceState`) |
| Помилки 404 | Налаштовуються на сервері | Мають оброблятися в клієнтському роутері (`<Route path="*">`) |

---

## Комбінований підхід

Багато сучасних фреймворків (наприклад, **Next.js**, **Remix**) використовують **гібрид**:

- Сервер **рендерить першу сторінку (SSR)** -> для SEO і швидкого першого завантаження.
- Подальші переходи виконуються **на клієнті (SPA-routing)**.

Це дає **найкраще з обох світів** - швидку навігацію і хороше SEO.

---

## Підсумок:

> **Серверний роутинг** - сервер вирішує, що віддати користувачу при кожному переході.
> **Клієнтський роутинг** - браузер сам керує навігацією, не звертаючись до сервера за новим HTML.

React використовує **клієнтський роутинг**, а SSR-фреймворки на кшталт **Next.js** - **гібрид** (серверний + клієнтський).

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати451 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.