Next.js 15: турбо-режим сборки Turbopack и Server Components 2.0

[hannadev]

Next.js 15 приносит турбо-режим сборки Turbopack и улучшенную нативную поддержку Server Components 2.0. Эти фичи ускоряют разработку и продакшен, снижая размер бандлов и время рендера. Вы получите меньше JS на клиенте, быстрее загрузку страниц и проще работу с данными на сервере.

Для фронтенд-разработчиков это значит переход от медленных сборок к реальному времени отклика. Проблемы с большим бандлом и гидратацией уходят на второй план, а серверный рендеринг становится умнее. Давайте разберем, как это работает на практике.

Turbopack: стабильный турбо-режим для dev и продакшена

Turbopack в Next.js 15 полностью стабилен для разработки - все тесты проходят без ошибок. Теперь он охватывает 96% тестов для продакшена, добавляя tree shaking и лимит памяти. Это заменяет webpack на Rust-based движок, который в 10-20 раз быстрее в hot reload.

Представьте: меняете компонент - страница обновляется за секунды, без полной пересборки. В продакшене tree shaking удаляет неиспользуемый код, а лимит памяти (например, 512MB) предотвращает out of memory. Ретраи статических страниц решают проблемы с сетью - если fetch упал, сборка попробует снова.

Вот ключевые возможности Turbopack:

• Tree shaking: удаляет мертвый код из бандла, снижая размер на 20-30%.
• Memory limit: задаете в next.config.ts, например, 512MB - сборка не крашнется.
• Retries для статических страниц: автоматические повторы при ошибках сети или таймаутах.
• Hot module replacement: мгновенные обновления без потери состояния.

Фича	Webpack	Turbopack
Dev HMR	1-2 сек	50мс
Tree shaking	Частично	Полностью
Memory limit	Нет	Да, в bytes
Prod coverage	100%	96%

Важно: в experimental.turbo включайте treeShaking: true только после тестов - может сломать динамические импорты.

Server Components 2.0: нативная интеграция без лишнего JS

Server Components 2.0 в Next.js 15 рендерятся только на сервере, код не попадает в клиентский бандл. По умолчанию страницы - серверные, что упрощает SSR без настройки. Они интегрируются с Suspense для fallback’ов и Partial Fallback Prerendering (PFPR).

Это решает проблему большого JS: неинтерактивные части (формы, списки данных) рендерятся на сервере, клиент гидратирует только интерактив. Можно передавать Server Component как prop в Client Component - серверный код выполняется первым. С PFPR статическая часть отдается сразу, динамика догружается через Suspense.

Основные паттерны использования:

• Передача Server Component в Client как child: .
• Suspense интеграция: оборачивайте динамику в <Suspense fallback={}>.
• PFPR: experimental_ppr = true, статические компоненты рендерятся заранее.
• Комбо с SSR: серверный рендер + минимальная гидратация.

Сравнение	Client Components	Server Components 2.0
JS бандл	Включает код	Не включает
Данные	fetch на клиенте	fetch на сервере
Интерактив	Да	Только серверный
Размер	Большой	Минимальный

Нюанс: Server Components не поддерживают useState или effects - для этого используйте ‘use client’.

Partial Prerendering и новые конфиги в Next.js 15

Partial Fallback Prerendering (PFPR) предрендерит статические части страницы заранее, динамику - на лету. Включается experimental_ppr = true, с Suspense для динамических блоков. Теперь next.config.ts на TypeScript - типизация конфига без @types.

Пример: статический хедер рендерится сразу, поисковая форма - после. Это ускоряет TTFB на 50%, клиент видит контент мгновенно. Асинхронные API и кэш обновлены для стабильности Server Actions. Ретраи сборки спасают от фейлов в CI/CD.

Преимущества PFPR:

• Статическая часть: отдается в первом чанке HTML.
• Динамика в Suspense: fallback до готовности данных.
• TypeScript config: import type { NextConfig } из ‘next’.

Код примера:

import { Suspense } from "react";
import Static from './Static';
import Dynamic from './Dynamic';

export const experimental_ppr = true;

export default function Page() {
  return (
    <>
      <Static />
      <Suspense fallback={<div>Загрузка...</div>}>
        <Dynamic />
      </Suspense>
    </>
  );
}

Turbopack + Server Components: реальная производительность

Комбо Turbopack и Server Components 2.0 дает TTI ниже 100мс и размер бандла под 50KB. Асинхронное кэширование ускоряет повторные запросы, безопасность Server Actions усилена. Для больших приложений - лимит памяти и tree shaking обязательны.

Остается за кадром полная поддержка Turbopack в продакшене - ждем 100%. Стоит поэкспериментировать с PFPR на реальных проектах, чтобы увидеть прирост в Core Web Vitals. А TypeScript-конфиг упростит миграцию legacy-проектов.