React 19.2: Activity с Partial Pre-rendering для фоновой загрузки в навигационных панелях

[hannadev]

React 19.2 приносит Activity - компонент, который меняет подход к фоновой загрузке данных. Вместо условного рендера, который убивает стейт и триггерит лишние useEffect, Activity держит всё в памяти, но рендерит с низким приоритетом. Это идеально для навигационных панелей, где сайдбары или меню нужно предзагружать заранее.

Partial Pre-rendering дополняет картину: статическая оболочка страницы летит с CDN мгновенно, а динамические части дорисовываются позже через Suspense. Проблема типичных дашбордов с лагами при переключении табов уходит в прошлое. Представь: пользователь кликает на пункт меню - контент уже готов, без спиннеров и подгрузок.

Что такое Activity и зачем он в навигационных панелях

Activity - это обёртка для компонентов, которая управляет видимостью через mode: ‘visible’ или ‘hidden’. В hidden-режиме компонент рендерится в фоне, не жрёт ресурсы видимого UI, но сохраняет весь стейт, хуки и данные. Раньше для сайдбара в навигации ты писал isVisible && , и при каждом скрытии - полный unmount, заново fetch данных, ререндеры. Теперь Activity прячет через CSS display: none, держит дерево живым.

В навигационных панелях это киллер-фича. Пользователь на главной - сайдбар с меню предзагружает данные из CMS или API в фоне. Кликнул на ‘Аналитика’ - переключаем mode на visible, и всё мгновенно, без задержек. Partial Pre-rendering усиливает: статический шелл (кнопки, структура) кэшируется, динамика (графики, таблицы) догоняет асинхронно. Производительность взлетает, особенно в больших дашбордах с lazy-loading.

• Сохранение стейта: Формы в скрытых табах не теряют ввод пользователя - вернёшься, и данные на месте.
• Фоновая предзагрузка: use() или TanStack Query prefetch работают незаметно, пока UI responsive.
• Низкий приоритет рендера: React не блокирует основной поток, hidden-компоненты рендерятся лениво.
• Интеграция с Suspense: Границы Suspense внутри Activity не ломают стриминг SSR.

Подход	Рендер	Стейт	Производительность	Пример для навигации
Условный &&	Удаляет DOM	Теряется	Быстрый unmount	Лаги при возврате
display: none	Скрывает	Сохраняется	Средняя	Лучше, но без предзагрузки
Activity	Фон + низкий приоритет	Полностью живой	Топ	Мгновенные табы
Partial Pre + Activity	CDN шелл + resume	Живой	Максимум	Дашборды enterprise

Partial Pre-rendering: как это работает под капотом

Partial Pre-rendering разбивает рендер на фазы: сначала статический prelude (оболочка) генерится на билде и кэшируется в CDN. Динамические дыры (Suspense boundaries) откладываются как postponed. На сервере по запросу resume() достраивает их из сохранённого состояния и стримит в браузер. В связке с Activity это магия: навигационная панель предрендерится статично, а контент табів - в фоне.

Для навигации пример: главная панель - статический шелл с иконкам�� и лейблами. Каждый таб (аналитика, профиль) в Activity hidden, с prefetch данных. Пользователь кликает - mode=‘visible’, resume заполняет дыры. Нет больше FID-лагов или CLS-скачков. API простые: prerender() возвращает {prelude, postponed}, resume() стримит остаток. В React 19.2 это работает из коробки с React Server Components.

• prerender(App): Разделяет на стат/дин, prelude на CDN.
• resume(postponed): Достраивает по запросу, стримит клиенту.
• Интеграция с Activity: Hidden-табы рендерятся с низким приоритетом внутри postponed.
• Бенефиты для Core Web Vitals: LCP падает, так как шелл мгновенный.
• SSR батчинг: Suspense раскрывается пачками, как на клиенте.

import { prerender, resume } from 'react-dom/server';

const { prelude, postponed } = await prerender(<NavPanel />, { signal });
// prelude -> CDN

const stream = await resume(<NavPanel />, postponed);
// Динамика стримится

Практический пример: Activity в навигационной панели

Представь дашборд с сайдбаром: табы ‘Dashboard’, ‘Users’, ‘Settings’. Каждый - отдельный компонент с fetch из API. Без Activity переключение = unmount + loader + remount. С Activity оборачиваем <Activity mode={activeTab === ‘users’ ? ‘visible’ : ‘hidden’}> . Пока неактивный, он prefetch’ит данные через use(), держит стейт.

В Partial Pre: корень навигации в prerender, табы - postponed с Activity внутри. Статика (иконки, структура) - CDN. Динамика (таблицы, чарты) resume по клику. Код лаконичный, без бойлерплейта. Нюанс: в hidden всегда display: none, не влияет на layout. Оптимизация бандла: lazy() для табів внутри Activity не ломает предзагрузку.

function NavPanel() {
  const [activeTab, setActiveTab] = useState('dashboard');
  return (
    <div className="nav-container">
      <Activity mode={activeTab === 'dashboard' ? 'visible' : 'hidden'}>
        <DashboardTab />
      </Activity>
      <Activity mode={activeTab === 'users' ? 'visible' : 'hidden'}>
        <UsersTab prefetchData />
      </Activity>
    </div>
  );
}

• Prefetch с TanStack: В hidden useQuery prefetch’ит silently.
• Форм-стейт: Inputs не сбрасываются при смене таба.
• Модалки и оверлеи: Предрендер в фоне, мгновенный show.

Нюансы и подводные камни Activity + Partial Pre

Activity не магия - в hidden рендер ленивый, но если данных тонна, может подтормаживать слабые девайсы. Всегда комбинируй с Suspense для границ. Partial Pre требует серверного setup: prerender на билде, resume на edge. В dev-режиме фоллбэк на full-render. Для навигации мониторь память - hidden Activity сожрёт RAM.

Тестируй с React Profiler: увидишь, как низкий приоритет рендера разгружает main thread. Интеграция с Next.js? Жди обновлений роутеров. Итог: для панелей с таба - это must-have, оптимизирует TTI и UX без хаков.

Когда Activity решает твои боли по-настоящему

Activity с Partial Pre бьёт в цель для навигаций, где табы или сайдбары жрут время на fetch. Стат шелл + фоновая жизнь компонентов = zero-lag switching. Осталось доработать: низкоприоритетные эффекты в hidden, или интеграцию с Offscreen API браузеров.

В реальных проектах подумай о комбо с useEffectEvent для событий без ререндеров. Или батчинге Suspense в стриминге. Это база для enterprise-дашбордов, где каждая миллисекунда counts.