Где реализовывается роутинг SPA (Single Page Application)

Роутинг SPA — это навигация между страницами внутри приложения без перезагрузки всей страницы. В отличие от традиционных веб-приложений, где сервер обрабатывает каждый запрос, в SPA роутинг реализуется полностью на клиенте.

Реализация роутинга на клиенте

Роутинг SPA реализуется в браузере через JavaScript. Основные инструменты и API:

1. History API (встроенный браузер API)

Isторически это был основной способ управления URL и историей навигации:

// Перейти на новый URL без перезагрузки
window.history.pushState({data: 'value'}, 'title', '/page1');

// Получить текущее состояние
console.log(window.location.pathname); // '/page1'

// Обработать кнопку "назад"
window.addEventListener('popstate', (event) => {
  console.log('URL изменился на:', window.location.pathname);
  renderPage(window.location.pathname);
});

// Заменить текущую запись в истории
window.history.replaceState({}, '', '/page2');

Особенности:

• pushState() — добавляет новую запись в историю
• replaceState() — заменяет текущую запись
• popstate событие — срабатывает при нажатии кнопок "назад"/"вперёд"
• Работает только с тем же origin (protocol + domain + port)

2. Hash-based роутинг (старый подход)

Использует якорь (#) в URL, не требует поддержки серверной части:

// URL: https://example.com/#/users/123

// Получить текущий хеш
const route = window.location.hash.slice(1); // '/users/123'

// Обработать изменение хеша
window.addEventListener('hashchange', () => {
  const hash = window.location.hash.slice(1);
  renderPage(hash);
});

// Программно изменить хеш
window.location.hash = '/dashboard';

Особенности:

• Все после # остается на клиенте
• Не требует поддержки серверной части
• Работает с файловым протоколом (file://)
• Менее SEO-дружественный
• Устаревший подход (не рекомендуется)

Современные фреймворки

Современные JavaScript фреймворки обеспечивают встроенные решения для роутинга:

React Router (самый популярный)

import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/users" element={<Users />} />
        <Route path="/users/:id" element={<UserDetail />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

function UserDetail() {
  const { id } = useParams(); // Получить параметр из URL
  const navigate = useNavigate(); // Программно перейти
  
  return (
    <div>
      <h1>User {id}</h1>
      <button onClick={() => navigate('/users')}>Back</button>
    </div>
  );
}

Особенности:

• Использует History API под капотом
• Поддержка параметров в URL (:id)
• Query parameters (?page=2)
• Nested routes
• Protected routes для аутентификации

Next.js App Router (встроенный)

Новый подход основанный на файловой структуре:

// app/page.tsx
export default function Home() {
  return <h1>Home</h1>;
}

// app/users/page.tsx
export default function UsersPage() {
  return <h1>Users</h1>;
}

// app/users/[id]/page.tsx
export default function UserDetail({ params }: { params: { id: string } }) {
  return <h1>User {params.id}</h1>;
}

Особенности:

• File-based routing (как Nuxt, Remix)
• Встроена поддержка URL параметров
• Server Components для SSR
• Оптимизированная производительность

Vue Router

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/', component: Home },
  { path: '/users', component: Users },
  { path: '/users/:id', component: UserDetail },
  { path: '/:pathMatch(.*)*', component: NotFound }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

<template>
  <router-link to="/users">Users</router-link>
  <router-view></router-view>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

const userId = route.params.id;

const goBack = () => {
  router.push('/users');
};
</script>

Архитектура роутинга в SPA

Типичный цикл:

1. Пользователь кликает на ссылку или меняет URL
  |
  v
2. Браузер изменяет window.location (History API)
  |
  v
3. Срабатывает popstate/hashchange событие
  |
  v
4. JavaScript обработчик парсит новый URL
  |
  v
5. Фреймворк/приложение определяет какой компонент отображать
  |
  v
6. Компонент рендерится (React, Vue, etc)
  |
  v
7. Страница обновляется БЕЗ полной перезагрузки

Сравнение подходов

Серверная поддержка для SPA

Хотя роутинг реализуется на клиенте, сервер должен быть настроен правильно:

// Express.js конфигурация для SPA
const express = require('express');
const app = express();

// Сервировать статические файлы
app.use(express.static('public'));

// API endpoints
app.get('/api/users', (req, res) => {
  res.json([{ id: 1, name: 'Alice' }]);
});

// SPA fallback — для всех остальных маршрутов отдаём index.html
// Браузер будет обрабатывать роутинг на клиенте
app.get('*', (req, res) => {
  res.sendFile('public/index.html');
});

app.listen(3000);

Это важно: Сервер должен отправить index.html для всех неизвестных маршрутов, чтобы браузер мог загрузить JavaScript и обработать роутинг на клиенте.

Пример: простой роутинг с Vanilla JS

class Router {
  constructor(routes) {
    this.routes = routes;
    this.currentPage = null;
    this.setupEventListeners();
  }
  
  setupEventListeners() {
    // Обработать кнопки браузера
    window.addEventListener('popstate', () => this.handleRouteChange());
    
    // Обработать клики на ссылки
    document.addEventListener('click', (e) => {
      if (e.target.tagName === 'A') {
        e.preventDefault();
        const path = e.target.getAttribute('href');
        this.navigate(path);
      }
    });
  }
  
  navigate(path) {
    window.history.pushState({}, '', path);
    this.handleRouteChange();
  }
  
  handleRouteChange() {
    const path = window.location.pathname;
    const route = this.routes[path];
    
    if (route) {
      this.currentPage = route;
      document.getElementById('app').innerHTML = route.render();
    } else {
      document.getElementById('app').innerHTML = '<h1>404 Not Found</h1>';
    }
  }
}

const routes = {
  '/': { render: () => '<h1>Home</h1>' },
  '/about': { render: () => '<h1>About</h1>' },
  '/contact': { render: () => '<h1>Contact</h1>' }
};

const router = new Router(routes);
router.handleRouteChange(); // Первоначальная загрузка

Лучшие практики

1. Используй History API, а не hash routing

   • Более SEO-дружественный
   • Чище URL
   • Современный стандарт

2. Используй готовые библиотеки

   • React Router, Vue Router, Next.js
   • Экономит время, проверено на production

3. Обрабатывай 404 страницы

   • Перенаправляй на home или специальную 404 страницу

4. Правильно настрой сервер

   • SPA fallback (отдавай index.html для всех маршрутов)

5. Используй relative URLs

   • /users/123 вместо https://example.com/users/123
   • Упрощает тестирование и development

Вывод

Роутинг SPA реализуется полностью на клиенте через:

• History API (window.history, window.location)
• JavaScript обработчики (addEventListener)
• Современные фреймворки (React Router, Vue Router, Next.js)

Сервер просто отдает index.html, остальное происходит в браузере. Это позволяет создавать быстрые и отзывчивые приложения без полных перезагрузок страницы.