Server Components в Next.js 14 сокращают размер бандла примерно на 60 % и снижают время первой отрисовки (first-paint) до менее чем 200 мс на типичной странице блога. Это означает, что пользователи быстрее видят контент, а поисковые системы получают полностью отрисованный HTML.

Новый релиз меняет стандартную модель выполнения для React-приложений, созданных на Next.js. Если раньше каждый компонент отправлялся в браузер, то теперь разработчики могут помечать части интерфейса как «Server Components», чтобы они выполнялись только на бэкенде. Код этих компонентов никогда не попадает к клиенту, оставляя браузеру только те части, которые требуют интерактивности.

Почему это важно

Разработчики React долгое время боролись с тремя взаимосвязанными проблемами: лавиной сетевых запросов, раздутыми JavaScript-бандлами и медленной загрузкой страниц. Эти проблемы также вредят SEO, так как исходный HTML, отправляемый краулерам, часто бывает пустым, что заставляет поисковых ботов ждать гидратации на стороне клиента. Next.js 14 устраняет первопричину, полностью перенося ресурсоемкую работу с данными с клиента.

Чем Server Components отличаются от старой модели

  • Server Components — выполняются на сервере, извлекают данные, взаимодействуют с базами данных и выдают обычный HTML. Их JavaScript никогда не передается по сети.
  • Client Components — остаются в браузере и обрабатывают взаимодействия в интерфейсе, такие как клики по кнопкам, отправка форм или любые компоненты, использующие React state или effects.

Фреймворк обеспечивает это разделение с помощью простой директивы. Добавление use client в начало файла указывает Next.js рассматривать этот компонент только как клиентский. Все, что не имеет этой метки, по умолчанию является Server Component.

Реальные цифры

Небольшой эксперимент на странице личного блога наглядно демонстрирует эффект. После переноса функции fetch в Server Component и того, что сервер отрисовал список как статический HTML, размер JavaScript-бандла сократился на 60 %, а страница отрисовалась менее чем за 200 мс.

Практическая схема слоев

  1. Нижний слой (Server) — извлекает данные из API или баз данных. Храните здесь любую приватную логику; она никогда не покидает сервер.
  2. Средний слой (Server) — преобразует «сырые» данные в чистую HTML-разметку. Этот слой все еще может использовать синтаксис React JSX, но остается исключительно серверным.
  3. Верхний слой (Client) — вставляет крошечные изолированные виджеты для интерактивности. Типичные примеры: кнопки «лайк», формы комментариев или выпадающие меню, требующие состояния (state).

Соблюдение этой иерархии позволяет основной части приложения оставаться легковесной, сохраняя при этом ощущение динамичности, которого ожидают пользователи.

Шаги, которые можно предпринять уже сегодня

  1. Просканируйте кодовую базу на наличие компонентов, которые используют useEffect исключительно для получения данных.
  2. Вынесите вызов fetch в новый Server Component, чтобы он возвращал отрисованную разметку.
  3. Создайте минимальный клиентский компонент (добавьте use client в начало) для любых оставшихся интерактивных элементов.
  4. Снова запустите bundle analyzer; вы должны увидеть заметное уменьшение размера.

Избегайте того, чтобы рассыпать use client повсюду. Если компонент не полагается на React state, context или хуки жизненного цикла, оставьте его как Server Component. Чем больше кода вы удержите вне клиента, тем меньше будет объем загрузки и тем быстрее станет страница.

Итог: Перенося получение данных и тяжелую отрисовку на сервер, Next.js 14 позволяет отправлять гораздо меньше JavaScript, мгновенно предоставлять полностью отрисованный HTML и сохранять интерактивность там, где она действительно важна. Результатом становится более быстрый и легкий веб-опыт, выгодный как пользователям, так и поисковым системам.