React 19.2: Partial Pre-rendering с Activity для предзагрузки модалок и стейта на back

[hannadev]

React 19.2 приносит Partial Pre-rendering и компонент Activity - это киллер-комбо для фоновой предзагрузки модальных окон. Теперь можно рендерить скрытые части приложения без лагов на видимом UI, prefetch’ить данные и сохранять стейт при back-навигации. Забудьте про conditional rendering с флагами - это решает боли с перфомансом и UX в реал-тайм приложениях.

Такие фичи идеальны для дашбордов, e-commerce или чатов, где модалки открываются мгновенно, а back не сбрасывает инпуты. React сам управляет обновлениями в фоне, когда свободен. Давайте разберем, как это работает на примерах.

Activity: предзагрузка модалок без ущерба перфомансу

Компонент Activity в React 19.2 меняет подход к скрытому контенту. Вместо {isVisible && } вы оборачиваете всё в <Activity mode={isVisible ? ‘visible’ : ‘hidden’}>. В hidden-режиме React mount’ит эффекты, но апдейты ставит в очередь - рендерит, когда не занят видимым UI. Это позволяет prefetch’ить данные для модалки в фоне: fetch, use() хуки, lazy loading - всё крутится незаметно.

Представьте sidebar с CMS-данными или модалку с тяжёлым контентом. Пользователь на главной, а React уже тянет данные для будущего клика. Когда модалка visible - она instant, стейт живой. На сервере visible рендерится normally, hidden - пропускается, чтобы SSR не тормозил. Это чистый win для SPA с динамикой.

• Фоновая предзагрузка: use(fetchData()) внутри Activity hidden запускается сразу, данные готовы к visible.
• Сохранение стейта: при back-навигации модалка не ремаунтится - инпуты, фокус, локальный стейт на месте.
• Перфоманс-буст: обновления hidden не блокируют main thread, React scheduler сам расставляет приоритеты.
• Нюанс: на сервере hidden контент не рендерится - проверяйте hydration mismatch через suppressHydrationWarning.

const modalDataPromise = fetchModalData();

function Modal() {
  const data = use(modalDataPromise);
  return <div>{data.content}</div>;
}

function App() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <button onClick={() => setIsOpen(true)}>Открыть</button>
      <Activity mode={isOpen ? 'visible' : 'hidden'}>
        <Modal />
      </Activity>
    </>
  );
}

Partial Pre-rendering: статический шелл + динамика на лету

Partial Pre-rendering (PPR) в 19.2 позволяет пререндерить статические части app заранее, закинуть на CDN, а динамику дорисовать по запросу. Вызываете prerender(, {signal}), получаете prelude (статический HTML с holes от Suspense) и postponed state. Сохраняете state, шлёте prelude клиенту - instant shell. Потом resume с state - и динамика стримится.

Это огонь для e-commerce: статичный layout, изображения, описания из CDN, а цена/сток/локализация - resume на сервере по user’у. Нет full SSR на каждый запрос, перфоманс взлетает. С Activity комбо: модалки в hidden prefetch’ат динамику внутри PPR-holes. Back-навигация сохраняет стейт, потому что Activity держит его живым.

Сценарий	До React 19.2	С Partial Pre-rendering + Activity
Модалка	Conditional render, сброс стейта на back	Предзагрузка в hidden, стейт живой
SSR	Full render на каждый запрос	Static prelude + dynamic resume
Перфоманс	Лаги от фоновых fetch	Background updates без блокировок
Предзагрузка	Manual prefetch	Авто через use() в Activity

• prerender API: {prelude, postponed} = await prerender(<App />) - сохраняете postponed для resume.
• resume на сервере: resumeStream = await resume(<App />, postponed) - стрим динамики.
• CDN-оптимизация: prelude кэшируется, TTFB падает до 10мс для static shell.
• Важно: AbortController для отмены, интегрируйте с вашим bundler’ом (Vite/Next).

Комбо Activity + PPR для модалок с back-стейтом

Оборачиваем модалку в Activity внутри Suspense для PPR. Static shell рендерится на prerender, модалка в hidden prefetch’ит данные через use(fetch()). При клике mode=‘visible’ - instant render без рефетча. Back? Activity держит mount’нутый стейт - инпуты не сбрасываются, фокус возвращается.

В дашбордах или чатах это спасает: пользователь листает tabs, модалки предзагружены, навигация butter-smooth. Серверный рендер: visible части в prelude, hidden - в background после hydrate. Линтер React Hooks v6 подхватит новые паттерны, никаких warnings. Масштабируйте на большие apps - бандл не жирнеет, lazy chunks грузятся по нужде.

function Dashboard() {
  return (
    <Suspense fallback={<Loader />}>
      <Activity mode={showModal ? 'visible' : 'hidden'}>
        <ModalWithData />
      </Activity>
    </Suspense>
  );
}

• Back-навигация: стейт persists, нет ремаунта - UX как в нативном app.
• Data fetching: use(promise) в hidden - данные готовы заранее.
• Edge-кейсы: обработайте race conditions через cacheSignal для shared state.

Когда Activity рендерит в фоне - тонкости тюнинга

Activity hidden не просто прячет DOM - он приостанавливает visible updates, но держит логику живой. Идеально для prefetch модалок с формами: user заполнил инпут - back не потеряет. С PPR комбинируйте осторожно: postponed state должен захватывать Activity internals. Тестируйте на devtools React Profiler - увидите, как hidden chunks не жрут main thread.

На проде мониторьте bundle size - новые API минимальны, но lazy’те модалки. Интеграция с RSC (React Server Components) усиливает эффект: сервер push’ит данные в hidden boundaries.

• Профилинг: useEffectEvent для non-DOM эффектов в Activity.
• SSR-нюансы: hidden не гидратируется сразу - используйте dynamic import.
• Оптимизации: комбинируйте с SuspenseList для ordered fallback’ов.

Фичи за кадром, которые просятся в прод

Partial Pre-rendering с Activity - это фундамент для next-gen UX, но есть нюансы вроде cacheSignal для optimistic updates или Web Streams интеграции для стримов. Стоит покопать, как это стыкуется с вашим SSR-фреймворком - Next.js или custom bundler. Дальше эволюционирует в full predictive rendering, где React угадывает user flow по паттернам.