Как работает SPA при обновлении страницы?

2.0 Middle🔥 172 комментариев

#JavaScript Core

Комментарии (2)

🐱

claude-haiku-4.5PrepBro AI3 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Как работает SPA при обновлении страницы

Это классический вопрос на собеседованиях, потому что ответ показывает понимание архитектуры современных веб-приложений. Объясню процесс пошагово.

1. Разница между SPA и MPA

Traditional MPA (Multi-Page Application):

User refresh -> HTTP GET request -> Server renders HTML -> Browser loads new page

SPA (Single Page Application):

User refresh -> HTTP GET request -> Server returns index.html -> 
JavaScript takes over routing -> Renders correct view based on URL

2. Что происходит при Ctrl+R в SPA

Этап 1: Browser запрос

// URL в адресной строке: https://prepbro.ru/questions/123
// User нажимает Ctrl+R (refresh)

// Browser отправляет:
GET /questions/123 HTTP/1.1
Host: prepbro.ru
Accept: text/html

Этап 2: Server response

<!-- Сервер возвращает всегда один файл (index.html) -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>PrepBro</title>
    <script src="/js/bundle.abc123.js" defer></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Этот же HTML возвращается независимо от пути:

/ -> index.html
/questions/123 -> index.html
/professions -> index.html
/settings -> index.html

Этап 3: Browser загружает assets

// Параллельно загружаются:
// 1. JavaScript бандл (bundle.js)
// 2. CSS файлы
// 3. Шрифты (Inter)
// 4. Изображения

Этап 4: JavaScript берет управление

// Когда bundle.js загрузился и выполнился:

// 1. React инициализируется
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

// 2. App компонент инициализируется
export function App() {
  return <Router>...</Router>; // Next.js Router или React Router
}

// 3. Router смотрит текущий URL и показывает нужный компонент
function Router() {
  // Текущий URL: /questions/123
  // Router находит matching route
  return <QuestionsDetailPage questionId="123" />;
}

3. Роль Next.js в обработке refresh

В Next.js (как в PrepBro) процесс отличается:

// next.config.js
module.exports = {
  output: 'standalone', // Важно!
};

// Сервер (Next.js) отвечает на любой GET запрос:
GET /questions/123 -> Возвращает index.html + hydration data
GET /professions   -> Возвращает index.html + hydration data
GET /api/v1/...    -> Возвращает JSON API endpoint

4. Hydration - критическое понятие

// Когда Next.js с SSR/ISR отправляет HTML:

// 1. Server отправляет готовый HTML с данными
HTML:
<div id="__next">
  <div class="page">
    <!-- Уже готовая разметка на стороне сервера -->
    <h1>Question 123</h1>
    <p>This is a question</p>
  </div>
</div>

// 2. Browser показывает HTML сразу (быстро!)
// 3. JavaScript загружается в фоне
// 4. React "гидрирует" статический HTML

const root = ReactDOM.hydrateRoot(
  document.getElementById('__next'),
  <App initialData={{...}} />
);

// 5. React атачится к существующему DOM
// 6. Добавляет event listeners
// 7. Теперь приложение fully interactive

5. Полный процесс с кодом

// User нажимает Ctrl+R на https://prepbro.ru/questions/123

// Timeline:

// t=0ms
// Browser: отправляет GET /questions/123

// t=50ms
// Server (Next.js): обрабатывает запрос
const data = await getQuestion(123); // Может быть SSR или ISR
return renderToString(<QuestionsPage data={data} />);

// t=100ms
// Browser: получает HTML, начинает парсить
// Можно уже видеть контент (благодаря SSR)

// t=200ms
// Browser: загрузил JavaScript бандл
// React инициализируется

// t=300ms
// React: провел hydration
// Приложение interactive
// Можно кликать на кнопки, заполнять форму и т.д.

// t=500ms
// Остальные ресурсы (картинки, шрифты) загружены

6. Что НЕ происходит при refresh в SPA

// ❌ НЕ происходит - Page не перезагружается с нуля как в MPA
// ❌ НЕ происходит - Server не отправляет разные HTML по пути
// ❌ НЕ происходит - JavaScript не переинициализируется полностью

// ✅ Что происходит:
// ✅ Server отправляет один index.html
// ✅ JavaScript роутер парсит URL
// ✅ Показывает нужный компонент
// ✅ Загружает данные через API

7. Проблемы и решения

Проблема 1: History состояние теряется

// Нужно сохранять state в localStorage или URL параметрах

function useFilterState() {
  const [filters, setFilters] = useState(() => {
    const saved = localStorage.getItem('filters');
    return saved ? JSON.parse(saved) : {};
  });

  const updateFilters = (newFilters) => {
    setFilters(newFilters);
    localStorage.setItem('filters', JSON.stringify(newFilters));
  };

  return [filters, updateFilters];
}

Проблема 2: Deep linking не работает без правильной настройки

// Нужно чтобы server всегда возвращал index.html
// In next.config.js - это работает автоматически

// Но в nginx нужно настроить:
location / {
  try_files $uri $uri/ /index.html;
}

Проблема 3: SEO не работает без SSR

// В Next.js решается через SSG/SSR/ISR
export async function getStaticProps(context) {
  const data = await fetchQuestion(context.params.id);
  return {
    props: { data },
    revalidate: 60, // ISR
  };
}

8. Оптимизация при refresh

// 1. Code Splitting - загружать только нужный код
const QuestionsPage = dynamic(() => import('./QuestionsPage'));

// 2. Prefetching - предзагружать вероятные ресурсы
const router = useRouter();
router.prefetch('/questions/124');

// 3. Caching - кэшировать ответы от API
const cached = useMemo(() => fetchData(id), [id]);

// 4. Service Worker - offline поддержка
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

9. Сравнение с CSR vs SSR

// CSR (Client-Side Rendering)
// Refresh: HTML -> blank page -> JS loads -> JS renders -> UI visible
// Минусы: медленнее, не SEO friendly

// SSR (Server-Side Rendering)
// Refresh: HTML -> UI visible -> JS loads -> hydration -> interactive
// Плюсы: быстрее, SEO friendly, но требует сервера

// ISR (Incremental Static Regeneration) - Next.js
// Refresh: Pre-rendered HTML -> UI visible -> revalidate in background
// Плюсы: лучшее из обоих миров

Практический пример из PrepBro

На сайте PrepBro при refresh на странице вопроса:

// 1. User на https://prepbro.ru/questions/abc123
// 2. Нажимает Ctrl+R
// 3. Next.js отправляет Pre-rendered HTML (ISR)
// 4. Браузер сразу видит вопрос, профессию, категорию
// 5. JavaScript загружается и hydrates
// 6. Теперь можно писать комментарии, лайкать и т.д.
// 7. Все работает как обычно SPA

Итого

В SPA при refresh:

Browser отправляет HTTP запрос по текущему URL
Server возвращает тот же index.html (возможно с SSR данными)
JavaScript загружается и берет управление
JavaScript роутер парсит URL и показывает нужный компонент
Приложение продолжает работать как обычная SPA

Важная особенность: нет перезагрузки страницы в классическом смысле, это контролируемая переинициализация JavaScript приложения.