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 через <Suspense> — юзер мгновенно видит 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 — <Link prefetch={true}> плюс '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.
