Клієнтський VS серверний роутинг

ReactJunior~2 хв читання

Коротко:

Критерій	Серверний роутинг (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 - гібрид (серверний + клієнтський).

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.