Preview Next.js 16.3

TL;DR Главная идея: server-driven приложение теперь может ощущаться как SPA, если на каждом async-await явно выбрать Stream / Cache / Block. Prefetching стал адекватным — один shell на роут вместо запроса на каждую ссылку.

Ден Абрамов присоединился к команде Next.js и Vercel. (на парт-тайме)

Решил две новости в одну совместить.

Ден с своей стороны будет не замыленным взглядом помогать закрыть пробелы в распространенных кейсах использования от маленьких блогов до больших проектов.

Как он говорит: — the team has been working hard at fixing many of those gaps. i hope to provide an additional “casual Next.js user“ voice to help prioritize the ones that bite people the most.

Теперь про обновление.

16.3 приносит нам Мгновенную навигацию.

Проблематика: Навигация ощущается медленной, когда запросы на стороне сервера ожидаются для отрисовки страницы. Для сохранения серверной модели и создание SPA-ощущений завозят следующие инструменты.

Cache Components Всё работает за флагом cacheComponents: true в next.config.ts. В будущем мажоре станет дефолтом. Курс на «dynamic by default, без скрытого кеширования».

Три стратегии для async-операций Когда роут await-ит данные на сервере, теперь надо явно выбрать поведение:

Stream через — юзер мгновенно видит loading-стейт, контент стримится. Cache через 'use cache' — мгновенно показывается закешированная UI. Block через export const instant = false на странице/лейауте — осознанно говорим «эта навигация ждёт сервер» (например, для блог-постов, где не хочется shell-а).

Stream/Cache → навигация мгновенная. Block → явный opt-out. Медленные навигации без Block теперь подсвечиваются как ошибки в dev через панель Instant Insights.

Partial Prefetching (отдельный флаг partialPrefetching: true) Раньше Next делал prefetch-запрос на каждую ссылку во вьюпорте — в Network вкладке был ад из запросов. Теперь:

Prefetch-ится один переиспользуемый shell на роут, не на ссылку. 20 ссылок на /chat/[id] → один запрос на shell этого роута. Shell-ы кешируются на клиенте на сессию. Концептуально как code-splitting по роутам в SPA. Это же основа для будущей offline-навигации.

Если нужно prefetch-ить больше чем shell — плюс 'use cache' на нужных кусках. По умолчанию ограничено build-time контентом; export const prefetch = 'allow-runtime' расширяет до request-time кеша (ценой нагрузки на сервер).

Тулинг

Instant Insights — панель в devtools, помечает не-instant роуты ошибками в dev. Navigation Inspector — ставит навигацию на паузу на этапе shell, видно что реально prefetch-ится, что грузится после. instant() helper для Playwright (@next/playwright) — ассерт, что после клика что-то видно мгновенно, без ожидания network. Хорошо ляжет на нашу стратегию тестов для защиты от регрессий. Есть skill для агента для миграции существующих проектов на Cache Components.