Когда клиент присылает бриф на лендинг и спрашивает, брать ли next.js для продающей страницы или сделать обычный React SPA, я сначала уточняю не бюджет, а источник трафика. Если страница живёт с контекстной рекламы или ссылок из Telegram-бота, рендеринг почти не важен - можно катать хоть на голом React. Если основной канал - органическая выдача, от SSR или SSG в Next.js напрямую зависит, увидит ли поисковик текст на странице или пустой div с id=“root”.
Next.js для продающей страницы: в чём принципиальная разница с React SPA
Под капотом это один и тот же React - компоненты, хуки, JSX. Разница в том, где и когда генерируется HTML. Обычный React SPA, собранный через Create React App или Vite, отдаёт браузеру почти пустой файл index.html и большой JS-бандл. Пока он не скачается и не выполнится, пользователь видит белый экран или спиннер, а поисковый робот - страницу без контента.
Next.js рендерит разметку заранее: либо на этапе сборки (SSG), либо на каждый запрос на сервере (SSR). В обоих случаях браузер получает готовый HTML с текстом, заголовками и метатегами ещё до того, как загрузится хоть один килобайт клиентского JavaScript. Для продающей страницы, которая должна закрывать заявку с первого экрана, это не техническая деталь - это разница между «страница уже читается» и «страница ещё грузится».
Рендеринг: SSG и SSR в Next.js против CSR в обычном React-приложении
Для лендинга, который меняется редко (пару раз в месяц - обновили цены, добавили кейс), обычно достаточно статической генерации. Next.js собирает HTML один раз на этапе деплоя, и дальше страница отдаётся как обычный статический файл - быстро, дёшево, без нагрузки на сервер при каждом визите.
SSR нужен там, где контент завязан на пользователя или контекст: динамическая цена в зависимости от региона, персонализация под UTM-метку, A/B‑тест на сервере без мигания вёрстки. Мета-теги для соцсетей и поисковиков тоже можно генерировать программно:
h2code:javascript:export async function generateMetadata() {n return {n title: ‘Автоматизация Telegram-ботов под ключ’,n description: ‘Разработка бота на aiogram с оплатой через Т‑Банк и доставкой СДЭК’,n openGraph: { images: [‘/og-cover.jpg’] },n }n}n
В обычном SPA то же самое приходится городить через react-helmet, и всё равно эти теги подставляются уже после гидратации - то есть краулер, который не выполняет JS полностью, их может просто не увидеть.
SEO и скорость загрузки: почему это решает именно для лендинга
Googlebot умеет рендерить JavaScript, но делает это со второй волной индексации, с задержкой от нескольких дней до пары недель. Яндекс с рендерингом SPA справляется заметно хуже - на практике видел лендинги на чистом React, у которых в панели вебмастера «пустая» страница месяцами не переиндексировалась, хотя визуально всё работало.
Скорость первого рендера - это ещё и прямой фактор Core Web Vitals. На одном из переездов с CRA-лендинга на Next.js LCP упал с 3.6 секунды до 1.1 за счёт того, что HTML пришёл сразу, а не после загрузки бандла в 280 КБ. Мобильный трафик, который в продающих страницах обычно 60-70% от общего, чувствителен к этой разнице сильнее всего - на слабом канале лишние полторы секунды до отрисовки текста ощущаются как зависание.
Конверсия: как рендеринг страницы влияет на заявки
Здесь работает простая механика: пока страница не прогрузилась, форма заявки не видна, кнопка звонка не кликается, а часть посетителей с рекламы просто закрывает вкладку раньше, чем успевает увидеть оффер. По собственным замерам на нескольких лендингах услуг после переноса с CSR-версии на Next.js с SSG количество заявок за первый месяц выросло на 12-18% при том же объёме трафика - единственная переменная, которая менялась, это время до первого осмысленного экрана.
Это не значит, что весь прирост дал именно рендеринг - часть эффекта всегда даёт заодно проведённый редизайн блока с ценами или пересобранная форма. Но убрать «слепое» время загрузки - это тот случай, когда техническое решение напрямую конвертируется в деньги, а не остаётся абстрактной метрикой для разработчика.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Когда обычного React SPA достаточно для продающей страницы
SSR - это не обязательный пункт для любой страницы с формой заявки. SPA на Vite или CRA оправдан, когда:
ul:li:Весь трафик платный (контекст, таргет, рассылки) и органическая выдача не нужна вообще.
li:Страница закрыта авторизацией - например, личный кабинет с калькулятором цены после лида, куда поисковики и не должны попасть.
li:Это MVP или прототип для проверки гипотезы: важнее скорость запуска за неделю, чем идеальный SEO, которого пока некому искать.
li:Лендинг встроен как часть более крупного веб-сервиса или SaaS, где основная логика и так работает через клиентский рендеринг и авторизацию.
В таких случаях тащить в проект Next.js ради SSR, который никто не увидит, - лишняя сложность: отдельный сервер под рендеринг, кэширование, инвалидация статики. Простой SPA на связке React + Vite поднимается за пару дней и стоит дешевле в поддержке именно из-за отсутствия серверной части.
Стоимость, сроки и техстек: Next.js-лендинг против SPA
table:
Критерий|Next.js (SSR/SSG)|React SPA (CSR)
Первый экран|HTML готов сразу|пустой div, ждём загрузки JS
Индексация в Яндексе и Google|стабильная, без задержек|зависит от рендеринга краулера, бывают провалы
Хостинг|нужен Node-сервер или edge-платформа|статика, любой CDN
Сложность стека|выше: роутинг, data fetching, кэш|ниже, особенно с Vite
Моя цена за разработку|от 80 000 ₽ за лендинг|на рынке у студий и фрилансеров обычно 40 000-70 000 ₽ за похожий объём
Когда оправдан|органика, реклама в Яндексе, репутационные страницы|платный трафик, MVP, страницы за авторизацией
Отдельно на сроки: типовой Next.js-лендинг с формой заявки, интеграцией эквайринга через Т‑Банк и калькулятором доставки СДЭК я закрываю за 2-3 недели. Простой SPA без SSR-инфраструктуры собирается на несколько дней быстрее - экономия идёт не на дизайне и не на функциях, а именно на настройке рендеринга и деплоя.
По интеграциям разницы между Next.js и SPA почти нет: формы, оплата, СДЭК, уведомления в Telegram через aiogram-бота или автоматизация обработки заявок в n8n подключаются одинаково что там, что там - это уровень API, а не рендеринга. Готовые заготовки под расчёт доставки СДЭК, приём оплаты и связку с CRM я собираю в библиотеке готовых скриптов, часть из них переносится между Tilda, Next.js и обычным SPA почти без изменений.
Быстрый SEO-лендинг под продукт
Лендинг на Next.js
от 80 000 ₽
Подробнее →Частые вопросы
Next.js - это только для крупных сайтов, или для одного лендинга тоже есть смысл?
Смысл есть именно для лендинга, если он должен находиться через поиск. SSR и SSG в Next.js работают одинаково хорошо что на сайте из 200 страниц, что на одном лендинге с формой заявки - накладных расходов на маленьком проекте почти нет, если сразу выбрать статическую генерацию, а не серверный рендеринг на каждый запрос.
Что будет с SEO, если сделать лендинг на обычном React без SSR?
Google со временем проиндексирует страницу, но с задержкой и не всегда стабильно, а с Яндексом на практике возникают проблемы чаще - робот может годами не видеть контент за клиентским рендерингом. Если органика - не источник трафика, это не критично, но если делать ставку на бесплатный поиск, отсутствие SSR становится ограничением с самого старта.
Сколько стоит и сколько делается лендинг на Next.js?
Лендинг на Next.js у меня стоит от 80 000 ₽, срок обычно 2-3 недели с учётом формы заявки, интеграции оплаты и доставки. Итоговая цена зависит от количества экранов, сложности интеграций и того, нужен ли, например, личный кабинет или калькулятор с бэкендом.
Можно ли перевести существующий SPA-лендинг на Next.js без переписывания всего с нуля?
Компоненты и логика на React переносятся почти без изменений, переписывать приходится в основном роутинг и слой загрузки данных под SSR/SSG. На практике такой перенос занимает меньше времени, чем разработка с нуля, если исходный SPA был написан аккуратно, без завязки всей логики на клиентские хуки без возможности серверного рендеринга.