Next.js 15: Turbopack с React 19 useOptimistic и useActionState для e-commerce

[hannadev]

Next.js 15 с Turbopack и React 19 меняет правила в e-commerce. Каталоги товаров теперь обновляются мгновенно - без лагов, с супер-оптимистичными UI. Это решает боль медленных корзин и фильтров, где юзеры ждут серверных ответов.

Turbopack ускоряет dev в 700 раз по сравнению с Webpack, а хуки useOptimistic и useActionState дают интерактив без костылей. Полезно для магазинов с тысячами товаров: меньше LCP, лучше Core Web Vitals. Разберем, как это пашет на практике.

Turbopack 2.0 - бандл летает, dev-сервер мгновенный

Turbopack в Next.js 15 - это киллер-фича для full-stack. Он полностью готов для dev-режима, с 100% покрытием тестов, и уже рвёт Webpack по скорости. Tree shaking убирает мертвый код, memory limit спасает от OOM на больших проектах. В e-commerce с SSR и кучей изображений это снижает RAM на 25-30%, а тяжелые страницы грузятся на 30-50% быстрее.

Представь каталог с пагинацией и фильтрами - раньше dev-сборка жрала минуты, теперь секунды. Fast Refresh в 5-10x шустрее, итерации летают. В next.config.js просто включаешь turbo с лимитами, и готово. Это DX-апгрейд: меньше фрустрации, больше фокуса на фичах.

• Tree Shaking: Автоудаляет неиспользуемый код, бандл минус 20-30%.
• Memory Limit: memoryLimit: 512 * 1024 * 1024 в config - нет крашам на слабом железе.
• Fast Refresh: Изменения в коде применяются мгновенно, без перезагрузки.
• Prod-готовность: 96% тестов для продакшена, edge-рендеринг на стероидах.

Фича	Webpack	Turbopack
Dev-сборка	Медленно	700x быстрее
RAM	Высокое	-25-30%
Tree Shaking	Частично	Полностью

React 19 хуки: useOptimistic и useActionState для optimistic UI

React 19 приносит useOptimistic и useActionState - это магия для форм и обновлений. useOptimistic рендерит UI как будто сервер ответил успешно, пока запрос в полете. В e-commerce это идеально для добавления в корзину: товар сразу появляется, без спиннеров. useActionState управляет стейтом формы, ошибками и pending-статусами на сервере.

Вместе с Server Actions из Next.js это full-stack без лишних API. Каталог обновляется мгновенно: фильтр по цене - optimistic рендер, сервер подтверждает. Нет mismatch гидратации, ошибки теперь умные - Next.js 15 их фиксит на лету. Код становится чище, без useState-боilerplate.

import { useOptimistic, useActionState } from 'react';

function AddToCart({ product }: { product: Product }) {
  const [optimisticCart, addOptimistic] = useOptimistic(
    cart,
    (state, newItem: Product) => [...state, newItem]
  );
  const [state, formAction, pending] = useActionState(addToCartAction, { error: null });

  return (
    <form action={formAction}>
      <button disabled={pending} onClick={() => addOptimistic(product)}>
        Добавить {pending ? '...' : ''}
      </button>
    </form>
  );
}

• useOptimistic: Кэширует optimistic стейт локально, синхронизирует с сервером.
• Нюанс: Работает только с Server Actions - никаких fetch в компонентах.
• useActionState: Триплет [state, action, isPending] - стейт, экшн, лоадер в одном.
• Гидратация: Next.js 15 фиксит mismatch, показывает точные ошибки в dev.

Интеграция в e-commerce каталог: SSR + мгновенные обновления

Для каталога товаров комбо Turbopack + React 19 хуков - огонь. SSR рендерит начальный список товаров, PPR (Partial Prerendering) лениво грузит динамику. Фильтры и поиск используют useOptimistic: юзер кликает - UI меняется сразу, сервер догоняет. Корзина обновляется без рефреша страницы.

В реальном проекте: страница /catalog с Server Components для товаров, Client для форм. Turbopack компилит все быстро, ESLint 9 + TypeScript config из коробки. Async Request APIs упрощают роутинг. Результат: LCP под 1s, FID нулевой, конверсия в e-com растет.

Сценарий	Старый подход	С Next.js 15 + React 19
Добавить в корзину	Spinner + fetch	Optimistic UI мгновенно
Фильтр товаров	Полный ререндер	useActionState + сервер
Dev-итерации	10-30s	1-2s с Turbopack
Ошибки	Криптические	Четкие hydration fixes

• PPR для каталога: Статический шелл + динамические слоты для фильтров.
• next/image: remotePatterns для CDN, WebP auto - трафик -50%.
• Внимание: Отключи агрессивный кэш по дефолту, включи explicitly для перф.

Turbopack и хуки - будущее e-commerce уже здесь

Эти фичи склеивают скорость Turbopack с реактивностью React 19 в монстра для магазинов. Мгновенные обновления каталога - не фантазия, а рабочий код на TS. Осталось доработать prod-Turbopack до 100% и интегрировать React Forget для автооптимизаций.

Дальше думай о edge-рантайме с этими хуками - задержки нулевые, глобальный e-com на стероидах. Плюс миграция на async APIs: роуты, middleware станут проще.