Как работает Soft Navigation (клиентская навигация) в Next.js App Router?

При переходе по ссылке браузер не перезагружает документ. Он отправляет фоновый fetch-запрос за Flight Payload новой страницы (с заголовком RSC: 1). React на клиенте парсит поток, загружает недостающие JS-чанки клиентских компонентов и производит согласование (reconciliation) виртуального дерева, обновляя только изменившиеся сегменты и сохраняя стейт неизменных компонентов.

Происходит ли повторная гидратация серверных компонентов при Soft Navigation?

Нет. Серверные компоненты не имеют клиентского кода и не гидратируются вовсе. Браузерный Reconciler просто принимает готовые виртуальные DOM-узлы из строки 'J' протокола Flight и напрямую монтирует их в DOM. Гидратация выполняется исключительно для клиентских компонентов, описанных маркерами 'I'.

Что происходит при несовпадении версий деплоя во время навигации (Version Skew)?

Если пользователь находится на старой версии страницы, а на сервере выкатился новый деплой, запрос за RSC Payload вернет ссылки на новые JS-чанки, которых нет в кэше старой версии. При обнаружении ошибки несоответствия манифеста Next.js автоматически выполняет жесткую перезагрузку (Hard Navigation), бесшовно обновляя приложение до актуальной версии.

Что такое React Flight Protocol и чем он принципиально отличается от классического JSON?

React Flight — это специализированный потоковый протокол передачи виртуального дерева компонентов от сервера к клиенту. В отличие от JSON, он поддерживает циклические ссылки, нативные объекты Date, Map, Set, BigInt, сериализацию JSX-элементов (деревьев компонентов), потоковые неразрешенные Promise, а также дескрипторы клиентских модулей (Client References) с указанием путей к JS-бандлам.

Почему функции (колбэки) нельзя передавать через Flight Protocol, а Server Actions — можно?

Обычные функции завязаны на локальную среду исполнения и замыкания памяти, которые невозможно передать по сети между разными рантаймами (Node.js и Browser). Server Actions — это не передача кода функции, а сериализация криптографически подписанного RPC-идентификатора (ID эндпоинта). Когда клиент вызывает такой action, он делает POST-запрос на сервер, где исходная функция и исполняется.

Какова роль Client Component Manifest в процессе бандлинга Turbopack?

Манифест — это JSON-карта, создаваемая сборщиком на этапе компиляции. Она связывает абстрактные идентификаторы клиентских компонентов в коде приложения с реальными хэшированными путями к чанкам в public-директории. Благодаря манифесту сервер знает, какие именно скрипты нужно включить в Resource Hints для браузера при встрече 'use client'.

Как React 19 Taint API взаимодействует с сериализацией Flight Protocol?

При вызове experimental_taintObjectReference(msg, object) объект регистрируется во внутреннем реестре безопасности React. Если в процессе сериализации серверного дерева в Flight Protocol сборщик встречает этот объект в пропсах Client Component, процесс сериализации немедленно прерывается с ошибкой безопасности, предотвращая утечку данных в сеть.

Каким образом в Flight Protocol сериализуются неразрешенные Promise?

Сервер отправляет дескриптор промиса с уникальным ID (маркер 'P'). Клиентский Reconciler создает ожидающий Promise в дереве. Когда сервер завершает асинхронную операцию, он досылает чанк с этим же ID и готовыми данными. Клиентский хук React 19 use(promise) перехватывает ответ и переводит Suspense-границу в состояние готовности.

Глубокое погружение: RSC Protocol и Архитектура — Next.js 16 App Router

Зачем это нужно#

Для решения типовых задач фронтенд-разработчику часто хватает базовых правил: «компоненты по умолчанию серверные», а для интерактивности нужно добавить 'use client'. Однако для Lead-архитекторов и Senior-инженеров поверхностного понимания недостаточно.

Когда приложение масштабируется до сотен маршрутов и миллионов пользователей, неизбежно возникают сложные низкоуровневые вопросы:

В каком физическом формате сервер передаёт отрендеренное дерево клиенту, если это не чистый HTML и не классический JSON?
Как браузер при переходе между страницами производит согласование (Reconciliation) без перезагрузки документа и с сохранением состояния сторонних клиентских компонентов?
Почему одни типы данных (нативные Date, BigInt, Map, Set, неразрешённые Promise) свободно пересекают границу сети, а функции и классы вызывают фатальные ошибки сериализации?

Глубокое понимание React Flight Protocol и внутреннего устройства сборщика Turbopack позволяет проектировать высокопроизводительные системы с минимальным оверхедом и молниеносно локализовать архитектурные сбои в продакшене.

Ментальная модель#

Рендеринг и доставка React Server Components — это не однократная генерация HTML, а потоковый конвейер, связывающий два рантайма (Node.js/Edge и Browser).

При первоначальном входе на сайт сервер отдаёт HTML-каркас (для мгновенного отображения первого контента FCP) вместе с потоком Flight Payload.

Однако при последующих переходах пользователя по ссылкам <Link> браузер не перезагружает HTML-страницу. Вместо этого инициируется Soft Navigation (Мягкая навигация): браузер отправляет фоновый сетевой запрос с заголовком RSC: 1 (или параметром ?_rsc=...), получая чистый поток инструкций Flight.

text

КЛИЕНТ (Браузер)                                СЕРВЕР (Node.js/Edge)
   │                                                   │
(1)│── Клик по ссылке <Link href="/analytics"> ───────►│
   │   GET /analytics?_rsc=123 (Заголовок RSC: 1)      │
   │                                                   │
(2)│                                                   │ 1. Исполнение Server Components
   │                                                   │ 2. Сериализация в Flight Protocol
   │                                                   │    - Resource Hints: H
   │                                                   │    - Client References: I
   │                                                   │    - UI Virtual Tree: J
   │                                                   │
(3)│◄── Поток RSC Flight Payload (Chunks) ─────────────┤
   │                                                   │
(4)│ 1. Парсинг потока Flight                          │
   │ 2. Turbopack догружает нужные JS-чанки (I)        │
   │ 3. React Reconciler согласует виртуальный DOM     │
   │ 4. Обновление UI БЕЗ перезагрузки страницы!       │
   │    (Стейт активных Client Components сохранен)    │

Жизненный цикл обработки запроса в RSC Protocol

1. Выполнение в Server Runtimeserver

Сервер запускает функции компонентов, разрешает асинхронные запросы к БД и генерирует виртуальное дерево элементов.

2. Сериализация в React Flight Wire Formatflight

Дерево преобразуется в строковый поток. Серверные узлы превращаются в JSON-теги, а клиентские компоненты — в Client References дескрипторы.

3. Проверка безопасности Taint APIsecurity

Рантайм React инспектирует передаваемые пропсы. Если в поток попадает объект с меткой taint, сериализация прерывается ошибкой безопасности.

4. Потоковая доставка чанковstream

Чанки Flight передаются через HTTP-стрим. Браузер начинает обработку первых строк до завершения рендеринга всей страницы.

5. Согласование (Reconciliation) и Гидратацияclient

React на клиенте встраивает новое поддерево в живой DOM, сверяя ключи с Client Component Manifest, и активирует интерактивность.

ЧЕКПОИНТ #1

Проверка понимания: Механика Soft Navigation в App Router

+15 XP

Что запрашивает браузер у сервера, когда пользователь кликает по внутренней ссылке <Link href='/analytics'> в Next.js App Router?

Синтаксис и API: React Flight Protocol#

В сетевом потоке Flight Payload представляет собой набор текстовых строк, разделенных символом перевода строки \n. Каждая строка начинается с префикса, определяющего тип инструкции:

text

H["/static/css/app.css","stylesheet"]
I["(app-pages-browser)/./components/Counter.tsx",["static/chunks/counter.js"],"Counter"]
J0:["$","div",null,{"className":"container","children":[
  ["$","h1",null,{"children":"Панель управления"}],
  ["$","$L1",null,{"initialCount":10}]
]}]

H (Resource Hint): Resource Hint для немедленной фоновой загрузки стилей и шрифтов.
I (Client Module Import): Запись Client Component Manifest, указывающая браузеру физический путь к JavaScript-чанку клиентского компонента.
J (JSON Element Tree): Сериализованное дерево элементов. Символ $ обозначает React.createElement, а $L1 указывает на клиентский модуль из строки I.

Интерактивный разбор потока Flight#

Инспектор React Flight Protocol (RSC Stream)

Анализируйте сырой бинарно-текстовый протокол сериализации React Server Components

STREAMING LIVE

Исходящий HTTP-запрос мягкой навигации:

RSC: 1

Требует Flight stream вместо HTML

Next-Router-State-Tree

Передает клиентский снимок для диффа

Next-Router-Prefetch: 1

Флаг предзагрузки через <Link>

Потоковые чанки text/x-component:Кликните на чанк

Client Reference (I)Client Reference Manifest (Директива 'use client')

1:I["./components/MetricCard.tsx",["chunks/metric_card_client.js"],"default"]

Serialized JSX AST (0)Сериализованное дерево элементов (JSX Stream)

0:{"name":"AnalyticsPage","children":["$","div",null,{"className":"p-6","children":["$","$L1",null,{"metric":"visitors"}]}]}

Lazy Slot Promise ($L1)Разрешение асинхронного Promise (Suspense Stream)

2:L1:{"value":14280,"status":"fresh","timestamp":1741859200}

Client Reference (I)

Client Reference Manifest (Директива 'use client')

Сервер не отправляет исходный код компонента MetricCard. Вместо этого он передает указатель на бандл-чанк, который клиентский браузер должен загрузить и гидратировать.

Архитектурное преимущество:

Остальные 90% кода страницы остаются на сервере и не попадают в JS-бандл (Zero-Bundle Size).

Next.js 16 оптимизация: Парсер Flight Payload на стороне клиента переписан на двухфазный нативный JavaScript-парсер, ускорив десериализацию на 350%.

Матрица сериализации React Flight Protocol (Wire Format)

Критерий	Поддерживается в Flight (Safe to pass)	Запрещено в Flight (Serialization Error)
Примитивные типы	string, number, boolean, null, undefined, BigInt	Symbol (кроме зарегистрированных через Symbol.for)
Сложные структуры	Plain Objects, Arrays, Map, Set, TypedArrays, ArrayBuffer	Экземпляры пользовательских классов (OOP Instances)
Временные сущности	Date (сохраняется как нативный объект времени)	RegExp, Generator Functions
Асинхронные типы	Promise (стримятся чанками и разворачиваются через use())	AsyncGenerator, WebSockets, ReadableStream (напрямую в props)
Функции и код	Server Actions (с 'use server', передаются как RPC-ссылки)	Обычные клиентские/серверные функции и обработчики (onClick)
React-элементы	JSX Elements (children, слоты, сгенерированные сервером)	React Context, mutable Ref objects (useRef)

Практические паттерны#

Паттерн 1: Безопасная проекция DTO с сохранением нативных типов#

React Flight нативно поддерживает Date и BigInt. Никогда не используйте деструктивный хак JSON.parse(JSON.stringify())! Проецируйте выборку через явный типизированный DTO:

tsxlib/dto/order.ts (Безопасный DTO)

export interface OrderDTO {
  id: string;
  totalAmount: bigint;     // Flight нативно сериализует BigInt!
  createdAt: Date;         // Flight нативно сериализует Date!
  metadata: Map<string, string>; // Flight нативно сериализует Map!
}

export function toOrderDTO(raw: {
  id: string;
  total: bigint;
  created_at: Date;
  meta: Record<string, string>;
}): OrderDTO {
  return {
    id: raw.id,
    totalAmount: raw.total,
    createdAt: raw.created_at,
    metadata: new Map(Object.entries(raw.meta)),
  };
}

tsxapp/orders/[id]/page.tsx (Server Component)

import { db } from '@/lib/db';
import { toOrderDTO } from '@/lib/dto/order';
import { ClientOrderView } from './ClientOrderView';

interface PageProps {
  params: Promise<{ id: string }>;
}

export default async function OrderPage({ params }: PageProps) {
  const { id } = await params;
  const rawOrder = await db.order.findUniqueOrThrow({ where: { id } });

  // Преобразуем в безопасный DTO с нативными типами
  const orderDTO = toOrderDTO(rawOrder);

  // Передаем клиенту: Date, BigInt и Map сохранятся без потерь!
  return <ClientOrderView order={orderDTO} />;
}

Паттерн 2: Server Actions как криптографические RPC-дескрипторы#

Когда функция с директивой 'use server' передается в клиентский компонент (например, через .bind()), рантайм React шифрует привязанные аргументы с помощью Action Closure Encryption:

tsxapp/users/page.tsx (Безопасный Server Action Prop)

import { deleteUserAction } from '@/app/actions/user';
import { DeleteUserButton } from './DeleteUserButton';

export default async function UsersPage() {
  const userId = 'usr_98741';

  // .bind() шифрует аргументы в закрытый криптографический токен внутри Flight Payload!
  // Клиент видит лишь непрозрачную RPC-ссылку вида: $F1 = ["$ACTION_ID_123", ["usr_98741"]]
  const boundDelete = deleteUserAction.bind(null, userId);

  return <DeleteUserButton onDelete={boundDelete} />;
}

ЧЕКПОИНТ #2

Проверка понимания: Нативная сериализация React Flight против JSON

+15 XP

Почему вызов JSON.parse(JSON.stringify(data)) перед передачей данных из Server Component в Client Component считается вредным антипаттерном в современной разработке?

Распространённые ошибки#

Ошибка: Антипаттерн JSON.parse(JSON.stringify()): разрушение нативных типов Flight

Попытка «очистить» объекты перед передачей клиенту через JSON.parse(JSON.stringify(data)) является грубой ошибкой:

Объекты Date превращаются в строки ISO 8601, требуя повторного new Date() на клиенте.
Значения BigInt выбрасывают фатальный TypeError: Do not know how to serialize a BigInt.
Коллекции Map и Set превращаются в пустые объекты {}.

React Flight нативно поддерживает Date, BigInt, Map, Set и ArrayBuffer!

Решение: Проецируйте выборку через типизированные DTO без использования JSON.stringify.

Ошибка: Скрытая утечка данных и раздувание Flight Payload при использовании .bind()

Когда вы привязываете аргументы к Server Action для передачи в Client Component, Next.js зашифрует все привязанные аргументы и передаст их клиенту внутри строки W протокола Flight. Если замкнуть массив на 10 000 элементов или секретный ключ, бандл Flight раздуется на мегабайты, а чувствительные данные будут отправлены на устройство пользователя.

Решение: Передавайте в .bind() только публичные скалярные идентификаторы (ID сущности), а секретные ключи извлекайте на сервере непосредственно внутри тела Server Action.

tsxБезопасная передача идентификаторов в Server Action

// ❌ ОПАСНО: передача приватного ключа в bound action
// const boundAction = deleteUser.bind(null, userId, secretApiKey);

// ✅ ПРАВИЛЬНО: передавать только публичный ID
// const boundAction = deleteUser.bind(null, userId);

Ошибка: Сбой навигации при деплое новой версии (ChunkLoadError / Version Mismatch)

Пользователь открыл сайт на версии деплоя v1. Вы выкатили v2, где хэши JS-чанков изменились. Пользователь кликает по ссылке:

Браузер запрашивает ?_rsc=... и получает Flight Payload от v2.
Flight Payload содержит строку I с хэшем нового чанка chunk-v2-abc.js.
Браузер пытается скачать этот чанк, но CDN или кэш отдают 404, либо рантайм React сталкивается с рассинхронизацией дерева.

Как Next.js решает это под капотом: Next.js перехватывает сбой согласования версий и автоматически инициирует Hard Navigation (полную перезагрузку документа), незаметно обновляя вкладку пользователя до версии v2.

Ошибка: Мутация пропсов на клиенте ломает повторную навигацию

Объекты, десериализованные из Flight Payload, замораживаются React (Object.freeze). Попытка напрямую изменить свойство props.user.name = 'New' выбросит ошибку в strict mode или приведет к неконсистентному состоянию Reconciler при повторном визите на страницу.

Вопросы с собеседований#

На собеседовании спросят8 вопросов

Связанные темы

Server и Client Компоненты в Next.js Паттерны композиции компонентов и Donut Pattern Потоковый рендеринг (Streaming SSR) и Suspense Partial Prerendering (PPR)

Глубокое погружение: RSC Protocol и Архитектура

Зачем это нужно#

Ментальная модель#

1. Архитектура мягкой навигации (Soft Navigation)#

Синтаксис и API: React Flight Protocol#

Интерактивный разбор потока Flight#

Инспектор React Flight Protocol (RSC Stream)

Client Reference Manifest (Директива 'use client')

Практические паттерны#

Паттерн 1: Безопасная проекция DTO с сохранением нативных типов#

Паттерн 2: Server Actions как криптографические RPC-дескрипторы#

Распространённые ошибки#

Ошибка: Антипаттерн JSON.parse(JSON.stringify()): разрушение нативных типов Flight

Ошибка: Скрытая утечка данных и раздувание Flight Payload при использовании .bind()

Ошибка: Сбой навигации при деплое новой версии (ChunkLoadError / Version Mismatch)

Ошибка: Мутация пропсов на клиенте ломает повторную навигацию

Вопросы с собеседований#

Зачем это нужно#

Ментальная модель#

1. Архитектура мягкой навигации (Soft Navigation)#

Синтаксис и API: React Flight Protocol#

Интерактивный разбор потока Flight#

Инспектор React Flight Protocol (RSC Stream)

Client Reference Manifest (Директива 'use client')

Практические паттерны#

Паттерн 1: Безопасная проекция DTO с сохранением нативных типов#

Паттерн 2: Server Actions как криптографические RPC-дескрипторы#

Распространённые ошибки#

Ошибка: Антипаттерн JSON.parse(JSON.stringify()): разрушение нативных типов Flight

Ошибка: Скрытая утечка данных и раздувание Flight Payload при использовании .bind()

Ошибка: Сбой навигации при деплое новой версии (ChunkLoadError / Version Mismatch)

Ошибка: Мутация пропсов на клиенте ломает повторную навигацию

Вопросы с собеседований#