Как работает пререндеринг
Почему ваш Next.js сайта работает медленнее конкурентов, хотя используете современный стек? Проблема часто не в коде и не в браузере, а в том, как вы рендеритесь страницы на стороне сервера и клиента. Большинство разработчиков либо усложняют динамический рендеринг на сервере, либо отправляют слишком много JS на клиента, мешая поисковым системам индексировать контент страницы полностью. Пререндеринг предлагает другой подход. Во время build вы генерируете HTML на сервере и сохраняете готовые страницы. Файлы лежат на сервере, браузер загружает код мгновенно — это работает лучше всего. С помощью пререндеринга вы используете кешированный HTML и снижаете нагрузку на сервере. Пререндеринг это метод, который помогает поисковым системам индексировать структурированный код и с помощью этого подхода взяли под контроль производительность сайта. В этой статье разбираем, как работает пререндеринг на практике, какой подход выбрать для страницы вашего проекта и сайта.
Почему поисковые роботы видят пустоту
Большинство современных сайтов на React или Vue имеют одну скрытую проблему. Ты открываешь страницу в браузере — всё красиво, контент на месте. Но когда заглядываешь в Google Search Console, видишь, что поисковые роботы получили пустой HTML. Как так?
Причина в клиентском рендеринге. Браузер загружает оболочку с <div id="root">, а потом JavaScript выполняется и добавляет контент. Боты не ждут выполнения кода — они забирают начальный HTML и уходят. Результат: поисковые системы видят пустую страницу. Контент есть, но индексируется как отсутствующий. Ранжирование падает, трафик не приходит.
Что такое пререндеринг
Пререндеринг — это заранее подготовленный или сгенерированный HTML, который браузер получает сразу, без задержек на JavaScript. На стороне сервера контент страницы готов ещё до момента загрузки. Пользователя видит полный контент, поисковые боты тоже.
Если объяснять аналогией: обычный серверный рендеринг похож на готовку блюда на заказ (долго, но всегда свежее), а статическая генерация — на заготовленные блюда в холодильнике (очень быстро, но есть риск устаревания). Пререндеринг выбирает скорость.
На практике это работает так. На стороне сервера генерируется HTML с полным контентом. Браузер не выполняет код — просто скачивает готовый файл. Поисковых систем получают полный текст, заголовки, разметку. Они индексируют правильнее и быстрее.
Три подхода к пререндерингу
Static Site Generation (SSG). Во время build проекта ты один раз генерируешь все страницы на стороне сервера. Готовые HTML файлы лежат на сервере. Браузер скачивает их мгновенно. Это работает лучше всего по скорости. Минус: очень новые данные не появляются автоматически. Нужно перестраивать весь сайт. Подходит блогам, документации, лендингам.
Incremental Static Regeneration (ISR). Гибридный подход. Основные страницы строишь при build, остальные генерируешь по требованию. Старые страницы кешируются, но обновляются в фоне. Используй это для e-commerce с тысячами товаров. Популярные товары уже готовы, редкие генерируются по первому запросу.
Server-Side Rendering (SSR). Page генерируется на сервере для каждого запроса. Данные всегда свежие, но требует больше ресурсов. Применяй когда у каждого пользователя свои данные.
Коммерческая ценность пререндеринга
Пререндеринг объединяет три бизнес-преимущества.
SEO и индексация. Когда контент готов при загрузке, поисковые системы видят полный текст. Они правильнее анализируют смысл страницы, быстрее её индексируют. Результат: лучшее ранжирование, больше трафика.
Скорость загрузки. Браузеру не нужно выполнять JavaScript. Контент виден сразу. На медленном телефоне или слабом интернете это критично для удержания пользователей.
Стабильность системы. Количество JavaScript на клиенте уменьшается. Браузер не нагружается, вкладка не зависает, батарея телефона разряжается медленнее.
Core Web Vitals при пререндеринге
First Contentful Paint (FCP) — время появления первого контента. Улучшается кардинально. Вместо времени выполнения кода видишь контент сразу.
Largest Contentful Paint (LCP) — загрузка крупного элемента. Улучшается, но меньше чем FCP. Зависит от размера изображений и других ресурсов.
Cumulative Layout Shift (CLS) — стабильность макета при загрузке. Остаётся примерно на одном уровне. Макет уже известен с начала, он не "прыгает".
Конкретные цифры зависят от проекта, но тренд очевидный: пререндеринг критически улучшает FCP, заметно помогает LCP, CLS обычно не меняется.
Где использовать пререндеринг
Статьи и блоги — выбирай SSG. Контент стабилен, страницы готовятся один раз.
E-commerce с быстро меняющимися ценами — используй SSR. Данные должны быть актуальными в реальное время, найти другой способ сложнее.
Каталоги товаров с редкими обновлениями — подходит ISR. Популярные товары готовы при build, редкие генерируются по запросам.
Персональные кабинеты — SSR или динамический рендеринг. Каждый пользователь видит свои данные, заранее сгенерировать невозможно.
Правильный выбор подхода для разных частей сайта одновременно решает проблему с производительностью и с поисковой видимостью. Это не требует колоссальных затрат, а результат заметен с первых дней.