Граница server/client, use client, use server, сериализация, Actions и практическая модель Next.js App Router.
Server Components переносят code/data access за client bundle, но требуют явной границы сериализации и доверия.
Вы разделите server/client responsibilities, сократите client JS и защитите Server Functions как сетевые команды.
До начала достаточно SSR/hydration, Suspense, Actions, security и async components. В конце должен появиться не конспект, а Next App Router feature с RSC data access, маленьким client island и безопасной mutation.
Server Component может быть async, читать DB/files и импортировать тяжёлую server-only library. Его code не отправляется browser; результат сериализуется в RSC payload/HTML integration. Он не использует state/effects/browser APIs. Это не просто SSR client component.
Рабочая проверка. Перенесите markdown parsing server-side.
Типичная поломка. Импортировать db client в client component.
use client создаёт module boundaryДиректива в module отмечает exports как client entry; все transitively imported modules должны быть client-compatible. Не ставьте её на каждый file: boundary лучше ниже, вокруг интерактивного island. Props от server к client должны serializable.
Рабочая проверка. Опустите client boundary с page до EditorControls.
Типичная поломка. use client в root layout без причины.
Через server→client boundary проходят поддерживаемые serializable values. Class instance, connection, arbitrary function и secret не подходят. Преобразуйте domain object в DTO с минимальными полями. Server Function references — специальный framework protocol, не обычные callbacks.
Рабочая проверка. Сделайте DocumentEditorDTO.
Типичная поломка. Передать ORM entity с methods/secrets.
Server Component может импортировать Client Component и передавать ему data/children. Client Component не импортирует Server Component как runtime child напрямую, но может получить уже сформированный server element через prop/children по framework pattern. Это сохраняет server work внутри interactive shell.
Рабочая проверка. Передайте server-rendered details в client expandable.
Типичная поломка. Перенести data owner client-side ради одного toggle.
use server отмечает async функции, вызываемые клиентом через reference. Function, переданная form action, становится Server Action. Validate/auth/idempotency обязательны. Возвращайте serializable safe result, revalidate cache/routes по framework policy и не раскрывайте stack.
Рабочая проверка. Сохраните document с session/version.
Типичная поломка. Считать action private из-за отсутствия UI link.
Framework может memoize fetch/data per request и cache across requests по policy. Не смешивайте request deduplication с persistent cache. Private data keys включают auth scope или помечаются no-store. Mutation invalidates tags/routes после commit, не до транзакции.
Рабочая проверка. Опишите cache matrix public/private.
Типичная поломка. Global cache key documentId без tenant.
Server Component может начать Promise и передать его Client Component, который читает через use под Suspense. Это запускает work раньше и не блокирует critical server content. Promise/result должны соответствовать serialization и error boundary. Не передавайте unbounded stream/secret.
Рабочая проверка. Передайте commentsPromise ниже critical article.
Типичная поломка. Await secondary data до shell.
React 19 RSC features стабильны для приложений, но низкоуровневые APIs для bundler/framework implementers не следуют semver полностью. Прикладной курс использует supported Next App Router, а не самописный RSC bundler. Framework/React upgrades проходят compatibility tests и security advisories.
Рабочая проверка. Зафиксируйте версии и upgrade checklist.
Типичная поломка. Импортировать internal react-server-dom APIs напрямую.
Реализуйте страницу документа: async Server Component читает repository, Client Editor получает serializable DTO, Server Function сохраняет с auth/version validation, useActionState показывает conflict. Не передавайте secrets/classes/functions через boundary.
Критерий завершения: client bundle не содержит server library, boundary serializable, action защищена object authorization и optimistic conflict policy. Сначала зафиксируйте наблюдаемое поведение тестом или измерением, затем меняйте реализацию.
Вопросы ещё не добавлены
Вопросы для этой подтемы ещё не добавлены.
Далее: Production-архитектура и наблюдаемость