{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧠 1. Что делает маршрутизация в SPA"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В "},{"type":"text","marks":[{"type":"bold"}],"text":"классическом SPA"},{"type":"text","text":" (без SSR):"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Сервер всегда отдаёт один и тот же файл — "},{"type":"text","marks":[{"type":"code"}],"text":"index.html"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В нём загружается JS-бандл (например, React Router)."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"При переходах между страницами браузер "},{"type":"text","marks":[{"type":"bold"}],"text":"не делает новых запросов на сервер"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"а просто меняет URL и рендерит другой компонент."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"👉 Сервер вообще "},{"type":"text","marks":[{"type":"bold"}],"text":"не знает"},{"type":"text","text":" о маршрутах — всё делает клиент."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ 2. Что добавляет SSR"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"При "},{"type":"text","marks":[{"type":"bold"}],"text":"SSR"},{"type":"text","text":" сервер снова становится участником процесса:"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пользователь запрашивает "},{"type":"text","marks":[{"type":"code"}],"text":"/about"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Сервер "},{"type":"text","marks":[{"type":"bold"}],"text":"определяет маршрут"},{"type":"text","text":" ("},{"type":"text","marks":[{"type":"code"}],"text":"/about"},{"type":"text","text":" → компонент "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":")."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Сервер "},{"type":"text","marks":[{"type":"bold"}],"text":"рендерит HTML"},{"type":"text","text":" этой страницы и отправляет готовую разметку."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"После загрузки JS клиент "},{"type":"text","marks":[{"type":"bold"}],"text":"“гидрирует”"},{"type":"text","text":" приложение, и маршрутизация продолжает работать уже как в SPA."}]}]}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"💡 Идея проста:"},{"type":"hardBreak"},{"type":"text","text":"— первый маршрут (первый запрос) рендерится "},{"type":"text","marks":[{"type":"bold"}],"text":"на сервере"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"— все последующие переходы — "},{"type":"text","marks":[{"type":"bold"}],"text":"на клиенте"},{"type":"text","text":"."}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"📜 3. Подробно: как SSR и SPA-роутинг взаимодействуют"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🧩 Этап 1: Первый запрос (server-side routing)"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Браузер делает запрос на "},{"type":"text","marks":[{"type":"code"}],"text":"/products/42"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Сервер (например, Next.js) определяет: этот маршрут соответствует компоненту "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Выполняет SSR → генерирует HTML → отправляет его браузеру."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📦 Пользователь видит уже готовую страницу (SSR-HTML)."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🧩 Этап 2: Hydration (оживление)"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"После получения HTML браузер загружает JS-бандлы маршрутов."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React (или другой фреймворк) гидрирует страницу — привязывает обработчики, состояние, инициализирует роутер."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"С этого момента "},{"type":"text","marks":[{"type":"bold"}],"text":"работает клиентская маршрутизация"},{"type":"text","text":"."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🧩 Этап 3: Клиентские переходы (client-side routing)"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пользователь кликает по ссылке "},{"type":"text","marks":[{"type":"code"}],"text":"Контакты"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Роутер (например, React Router, Next.js router) "},{"type":"text","marks":[{"type":"bold"}],"text":"перехватывает клик"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Вместо запроса на сервер:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"обновляется история ("},{"type":"text","marks":[{"type":"code"}],"text":"history.pushState()"},{"type":"text","text":"),"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"загружается нужный компонент ("},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":"),"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"и он рендерится без перезагрузки страницы."}]}]}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📍 Сервер уже не участвует — всё делает JS в браузере."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🌐 4. SSR при обновлении или прямом переходе"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если пользователь:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"обновляет страницу ("},{"type":"text","marks":[{"type":"code"}],"text":"F5"},{"type":"text","text":"),"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"или заходит напрямую по адресу "},{"type":"text","marks":[{"type":"code"}],"text":"/contact"},{"type":"text","text":","}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"➡️ сервер снова должен отрендерить нужную страницу,"},{"type":"hardBreak"},{"type":"text","text":"потому что браузер делает "},{"type":"text","marks":[{"type":"bold"}],"text":"новый HTTP-запрос"},{"type":"text","text":"."}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔁 Таким образом, SSR-роутинг и SPA-роутинг работают как зеркала:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Сервер обслуживает "},{"type":"text","marks":[{"type":"bold"}],"text":"первичный запрос"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Клиент обрабатывает "},{"type":"text","marks":[{"type":"bold"}],"text":"навигацию внутри приложения"},{"type":"text","text":"."}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ 5. Как это реализовано в фреймворках"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🧩 "},{"type":"text","marks":[{"type":"bold"}],"text":"Next.js"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Каждая страница ("},{"type":"text","marks":[{"type":"code"}],"text":"app/about/page.tsx"},{"type":"text","text":" или "},{"type":"text","marks":[{"type":"code"}],"text":"pages/about.tsx"},{"type":"text","text":") — отдельный маршрут."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"При первом запросе SSR отрисовывает компонент страницы."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"После гидрации "},{"type":"text","marks":[{"type":"code"}],"text":"next/router"},{"type":"text","text":" работает как SPA-роутер — переходы мгновенные."}]}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import Link from 'next/link';\n\nexport default function Nav() {\n return (\n \n );\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"➡️ Первый переход "},{"type":"text","marks":[{"type":"code"}],"text":"/about"},{"type":"text","text":" идёт через сервер,"},{"type":"hardBreak"},{"type":"text","text":"а клики по "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" — через клиентский роутинг."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🧩 "},{"type":"text","marks":[{"type":"bold"}],"text":"Remix / React Router 6.4+"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Сервер и клиент используют "},{"type":"text","marks":[{"type":"bold"}],"text":"один и тот же роутер"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"На сервере "},{"type":"text","marks":[{"type":"code"}],"text":"createStaticHandler()"},{"type":"text","text":" подготавливает данные и рендерит HTML."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"На клиенте "},{"type":"text","marks":[{"type":"code"}],"text":"createBrowserRouter()"},{"type":"text","text":" берёт те же маршруты и продолжает SPA-навигацию."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"📈 6. Преимущества такого подхода"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Преимущество"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Объяснение"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"⚡ Быстрая первая загрузка"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"SSR отдаёт HTML мгновенно"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔁 Без перезагрузки при переходах"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"После гидрации работает SPA"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔍 SEO-оптимизация"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Поисковик видит готовый HTML"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📱 Улучшенный UX"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Навигация плавная, как в нативных приложениях"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧩 Универсальная маршрутизация"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Один набор маршрутов работает и на сервере, и на клиенте"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚠️ 7. Потенциальные сложности"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Проблема"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Описание"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧩 Нужно синхронизировать роутер"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Один и тот же роутинг должен работать на сервере и клиенте"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"⏱️ Медленный SSR-рендер блокирует TTFB"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Нужно использовать Streaming SSR"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❌ Ошибки при гидрации маршрутов"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Разное состояние на сервере и клиенте → mismatch"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔒 Auth-роуты"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Проверка прав доступа должна работать и на сервере, и на клиенте"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧾 Итог"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"SSR и SPA-роутинг работают совместно:"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Этап"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Кто обрабатывает"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Что делает"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Первый запрос"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🖥️ Сервер"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Рендерит HTML выбранного маршрута"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Загрузка JS"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🌐 Клиент"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Выполняет гидрацию и инициализирует роутер"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Дальнейшие переходы"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🌐 Клиент"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Меняет маршруты без перезагрузки"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Обновление страницы"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🖥️ Сервер"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Снова выполняет SSR"}]}]}]}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"💡 SSR отвечает за "},{"type":"text","marks":[{"type":"bold"}],"text":"первый рендер"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"а SPA-роутинг — за "},{"type":"text","marks":[{"type":"bold"}],"text":"навигацию после гидрации"},{"type":"text","text":"."}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Как SSR работает с маршрутизацией SPA?

Комментарии