SSR и SPA: почему маркетинговый сайт рендерится на сервере

Спор старый и почти решённый, но выбор всё ещё делают неправильно — обычно потому, что фронтенд знаком, а последствия наступают через квартал.

Одностраничное приложение отдаёт браузеру почти пустой документ и скрипт, который дорисует страницу на месте. Серверный рендер отдаёт готовый HTML, а скрипт потом оживляет то, что уже нарисовано. Для приложения, в котором сидят часами, первый способ разумен. Для страницы, на которую приходят из поиска, — нет.

Что видит робот

Поисковый робот умеет исполнять скрипты, и об этом любят напоминать. Умеет — но не обязан и не сразу: страница, которую надо сначала отрисовать, попадает в очередь, а очередь у неё длиннее, чем у документа, который уже готов. Разница особенно заметна там, где страниц много и они меняются.

Хуже другое: всё, что решает судьбу сниппета, живёт в `<head>`. Заголовок, описание, канонический адрес, языковые версии, разметка для соцсетей. В одностраничном приложении это дописывается скриптом — то есть после того, как робот уже решил, что перед ним пустая страница. Ассистенты и краулеры соцсетей чаще всего скрипты не исполняют вовсе, и ссылка на такой сайт разворачивается в пустой прямоугольник.

Что видит человек

Первый экран приходит готовым — это не про красоту, а про то, сколько человек ждёт. Пустой белый экран, который через секунду становится сайтом, стоит дороже, чем кажется: доля тех, кто закрыл вкладку, растёт на каждой десятой доле секунды, и на мобильном интернете разница между «пришло готовым» и «дорисовалось» измеряется секундами, а не миллисекундами.

Что здесь делает шаблон

Наш шаблон — Next.js с App Router: страницы приходят готовыми, интерактив включается сверху. Мета, канонические адреса и языковые версии собираются на сервере из того же места, откуда берутся заголовки, — не дублируются руками и потому не расходятся. Соцкарточки не рисуются на лету, а лежат картинками, по одной на маршрут и язык.

Это не выбор, который делает каждый новый сайт заново. Он сделан один раз в шаблоне, и всё, что из него собирается, наследует его молча.