SSR и CSR

Разница видна в первом ответе сервера. При SSR в HTML уже лежат заголовок, текст, цены и ссылки — браузеру остаётся отрисовать и «оживить» страницу. При CSR приходит почти пустой документ и бандл JavaScript, который сначала загружается, потом исполняется, потом запрашивает данные по API и только затем что-то показывает. На быстром устройстве и хорошем канале разница незаметна; на бюджетном Android в мобильной сети она превращается в несколько секунд пустого экрана.

Для продвижения это не вопрос вкуса. Google научился исполнять JavaScript, но делает это вторым проходом и с задержкой; Яндекс работает с клиентским рендерингом заметно хуже, и для российского коммерческого проекта это решающий аргумент. Практическое правило: всё, что должно ранжироваться — карточки товаров, страницы услуг, статьи, категории, — отдаётся сервером в готовом HTML. Всё, что живёт после авторизации и в поиск не попадает — личный кабинет, админка, интерактивные конструкторы, — спокойно рендерится на клиенте.

На практике выбор редко бинарный. Современные фреймворки позволяют смешивать режимы на уровне страницы: статическая генерация для того, что меняется редко (статьи, лендинги), серверный рендеринг для того, что зависит от пользователя или обновляется часто (каталог с наличием), клиентский — для интерактивных частей внутри уже отрисованной страницы. Ловушка здесь одна и очень распространённая: включить SSR и считать вопрос скорости закрытым. SSR улучшает время до первого контента, но не спасает от тяжёлого бандла, который блокирует интерактивность и портит INP.

Смежные термины

• Core Web VitalsCore Web Vitals — три метрики скорости и стабильности страницы от Google: LCP (отрисовка главного элемента) должен укладываться в 2,5 секунды, INP (отклик на действие) — в 200 миллисекунд, CLS (сдвиг вёрстки) — в 0,1.
• SEOSEO — работа над сайтом и его окружением ради органических позиций в Яндексе и Google: техническая база, семантика, контент, коммерческие и поведенческие факторы, ссылочный профиль; первые устойчивые результаты появляются через 3–6 месяцев.
• Headless CMSHeadless CMS — система управления контентом без собственного шаблонизатора: редакторы работают в привычной админке, а сайт, мобильное приложение и любой другой канал получают те же данные через API и рисуют их своим фронтендом.
• PWAPWA — сайт, который ведёт себя как приложение: устанавливается на домашний экран прямо из браузера, работает офлайн за счёт service worker и умеет присылать push-уведомления, но не требует публикации в App Store и Google Play.
• Адаптивный дизайнАдаптивный дизайн — подход, при котором одна вёрстка перестраивается под ширину экрана: сетка, типографика и порядок блоков меняются на заданных брейкпоинтах, вместо того чтобы открывать отдельную мобильную версию на поддомене.

Услуги по теме

• Разработка сайтов под ключДелаем сайты, которые не разваливаются через полгода: от одностраничника на CMS до магазина и веб-приложения на React и Next.js. Один подрядчик на дизайн, код, интеграции и запуск.
• SEO и GEO продвижение сайтаПоисковый трафик — единственный канал, который не выключается вместе с рекламным бюджетом. Мы ведём сразу два направления: классическое SEO под Яндекс и Google и GEO — подготовку страниц к цитированию в ответах AI Overviews, Нейро, ChatGPT и Perplexity, где всё чаще заканчивается путь пользователя. Начинаем с аудита, а не с закупки ссылок.

Почитать подробнее

• Медленный сайт теряет деньги: Core Web Vitals и конверсияСкорость сайта — это не техническая метрика, а строка в отчёте о выручке. Разбираем Core Web Vitals простым языком, показываем, как найти настоящую причину медленной загрузки, и даём список исправлений, отсортированный по отдаче на час работы.
• Яндекс и Google: чем отличается продвижение и как работать с обоимиОдин сайт, два поисковика и разная логика ранжирования. Разбираем, где различия действительно меняют работу, зачем задавать регион сайта вручную и как построить стратегию, не написав контент дважды.
• Как выбрать стек технологий для проекта: критерии, а не модаСтек выбирают на 3–5 лет вперёд, а решают за один созвон. Разбираем, в каком порядке принимать решения, какие критерии реально имеют вес, какие стеки работают для шести типов проектов и сколько стоит ошибка.