Next.js 16: Turbopack, React 20 useOptimistic и use для AI-стримов

[hannadev]

Next.js 16 с Turbopack по умолчанию меняет правила игры в скорости dev и билдов. React 20 добавляет useOptimistic и use - хуки для оптимистичных обновлений и промисов, идеальные для стримов с AI-генерацией контента.

Это решает боли с лагучими рендерами при SSR и HMR, ускоряя DX в разы. Представь: билды в 2-5x быстрее, стейт обновляется мгновенно, даже если AI генерит текст на лету. Давай разберём, как это работает на практике.

Turbopack: теперь дефолт и ракета для больших репо

Turbopack в Next.js 16 стал стабильным и включается без флагов - просто апгрейдь и наслаждайся. Он написан на Rust, жрёт меньше памяти и даёт HMR в ~100мс вместо 500мс на Webpack. Для монореп файловый кэш в dev (beta) спасает от рестартов сервера - включи experimental.turbopackFileSystemCacheForDev: true и забудь про тормоза.

Цифры огонь: стартап в 2.28s vs 4.41s, билд 5s vs 11s, память 63MB vs 94MB. Build size падает до 11MB с 142MB - это 92% редукшн. Если кастомный webpack, мигрируй флагом --webpack или переключайся на turbopack в next.config.js. В реальных проектах GitHub Actions CI укорачивается на 2+ минуты - чистый профит для команды.

Вот сравнение производительности Turbopack vs Webpack:

Метрика	Webpack (v15)	Turbopack (v16)	Ускорение
Startup Time	4.41s	2.28s	48% быстрее
HMR Speed	~500ms	~100ms	80% быстрее
Build Time	11s	5s	54% быстрее
Memory Usage	94MB	63MB	32% меньше
Build Size	142MB	11MB	92% меньше

• ×10 быстрее Fast Refresh: Идеально для итераций в крупных репо.
• FS-кэш для dev: Включи для монстров с тысячами файлов - рестарты уходят.
• Меньше памяти: Rust магия, не ляжет на слабом железе.

React 20: useOptimistic и use для стримов с AI

React 20 приносит useOptimistic - хук для мгновенных UI-обновлений до ответа сервера. Пока AI генерит контент (типа текста или изображений), стейт меняется оптимистично - юзер видит прогресс сразу, без водопада запросов. use позволяет await промисы прямо в рендере, интегрируясь с Suspense для стримов.

В паре с Next.js 16 это киллер-фича для SSR-приложений: стримь чанки от AI-модели, optimistic апдейт стейта, и Web Vitals улетают в CLS=0, LCP под 1s. Без этого рендеры блокируются, UI фризится - чистая боль. React Compiler (стабильно в Next 16) авто-мемоизирует компоненты, убирая лишние ререндеры без useMemo/useCallback.

Ключевые плюсы для AI-стримов:

• useOptimistic: const [state, addOptimistic] = useOptimistic(initialState, updateFn); - апдейт до мутации.
• use: const data = use(fetchAIContent()); - асинхронный рендер с fallback’ами.
• React Compiler: Включи reactCompiler: true - автооптимизация, меньше бойлерплейта.

Пример на TypeScript для AI-генерации поста:

import { useOptimistic, use } from 'react';

const generateContent = async (prompt: string) => {
  const res = await fetch('/api/ai-generate', { body: JSON.stringify({ prompt }) });
  return res.json();
};

function AIStream() {
  const [optimisticContent, setOptimistic] = useOptimistic('', (state, newContent) => newContent);
  const pendingContent = use(generateContent('пиши пост про Next.js'));

  return <div>{optimisticContent || 'Генерим...'}</div>;
}

Интеграция в Next.js 16: кэш, PPR и апгрейд

В Next 16 кэширование через “use cache” - директивы для компонентов, страниц, RPC. PPR (Partial Prerendering) завершает историю: статические шеллы + динамические хонки стримятся отдельно. Async params в роутах позволяют await данных на сервере без блокировок.

Middleware эволюционировал в proxy.ts - проще, быстрее. Минимальный Node.js поднят, апгрейд через npx @next/codemod@canary upgrade latest. Замерь метрики до/после: Turbopack + Compiler = меньше ререндеров, идеальные Core Vitals. Для AI добавь TanStack Query на клиенте - кэш запросов, никаких дубликатов.

Список шагов для апгрейда:

1. npm i next@latest react@latest react-dom@latest
2. Включи Turbopack FS-кэш: { experimental: { turbopackFileSystemCacheForDev: true } }
3. React Compiler: { reactCompiler: true } + babel-plugin-react-compiler@latest
4. Тестируй PPR и “use cache” в page.tsx

Фича	Next 15	Next 16
Bundler	Webpack	Turbopack default
Кэш	unstable_cache	use cache
Middleware	middleware.ts	proxy.ts
Params	sync	async

Оптимистичные стримы: тонкости и подводные камни

Сначала подведём: Turbopack разгоняет DX, useOptimistic/use с React 20 - это мечта для AI-аппов со стримом. Контент генерится на сервере, UI responsive без лагов - LCP/FID в топе.

Осталось за кадром: тюнинг React Compiler под legacy-код (меряй бандл!) и комбо с Redis для серверного кэша. Подумай над стекингом с TanStack Virtual для списков из AI - 5k+ итемов без фризов. В 2026 это baseline для продакшена.