Селективная гидратация и приоритезация интерактивности в Suspense

[ Серверный HTML загружен в браузер ]
  ├── <Header />                  --> Чанк JS загружен: [ Гидрирован (Interactive) ]
  ├── <Suspense> (Остров Товара)   --> Чанк JS загружен: [ Фоновая гидратация...    ]
  └── <Suspense> (Остров Отзывов)  --> Чанк JS еще в сети: [ Ждет скачивания JS... ]

+----------------- [ Действие пользователя: КЛИК! ] -----------------+
Пользователь кликает по кнопке "Добавить в корзину" в [ Острове Товара ]!
  1. Глобальный перехватчик событий на document ловит click/pointerdown.
  2. Движок Fiber определяет, что узел находится в состоянии dehydrated.
  3. React эскалирует приоритет [ Острова Товара ] до SyncLane.
  4. Текущая фоновая работа прерывается; Остров Товара гидрируется немедленно.
  5. Механизм Event Replay повторно воспроизводит перехваченный клик.
  6. Состояние корзины обновляется без заметной пользователю задержки!
+----------------------------------------------------------------------+

interface QueuedDiscreteEvent {
  blockedOn: FiberNode | null; // Узел Fiber, гидратации которого ждет событие
  domEventName: string;
  event: Event;
  targetContainer: Node;
}

const queuedDiscreteEvents: QueuedDiscreteEvent[] = [];

export function dispatchDiscreteEvent(
  domEventName: string,
  event: Event,
  targetContainer: Node
): void {
  const target = event.target as Node | null;
  const targetFiber = getFiberFromNode(target);

  // Если узел еще не гидрирован (находится в очереди ожидания dehydrated)
  if (targetFiber !== null && isFiberDehydrated(targetFiber)) {
    // 1. Блокируем стандартное браузерное поведение и всплытие
    event.preventDefault();
    event.stopPropagation();

    // 2. Сохраняем событие в очередь ожидания
    queuedDiscreteEvents.push({
      blockedOn: targetFiber,
      domEventName,
      event,
      targetContainer,
    });

    // 3. ЭСКАЛАЦИЯ ПРИОРИТЕТА: форсируем немедленную гидратацию этого поддерева!
    // Узел переносится из IdleLane в SyncLane
    escalateHydrationPriority(targetFiber);
    return;
  }

  // Обычная синхронная обработка для уже гидрированных узлов
  dispatchEvent(domEventName, event, targetContainer);
}

export function replayDiscreteEventsForFiber(hydratedFiber: FiberNode): void {
  for (let i = 0; i < queuedDiscreteEvents.length; i++) {
    const queued = queuedDiscreteEvents[i];
    if (queued.blockedOn === hydratedFiber) {
      // Воспроизведение сохраненного события на уже интерактивном DOM
      queued.targetContainer.dispatchEvent(queued.event);
      queuedDiscreteEvents.splice(i, 1);
      i--;
    }
  }
}

import React, { Suspense, lazy, useState } from 'react';

// Ленивая подгрузка тяжелых интерактивных модулей (отдельные JS-чанки)
const DynamicColorCustomizer = lazy(() => import('./DynamicColorCustomizer'));
const HeavyReviewSection = lazy(() => import('./HeavyReviewSection'));
const InteractiveSimilarProducts = lazy(() => import('./InteractiveSimilarProducts'));

interface ProductProps {
  id: string;
  name: string;
  price: number;
  initialStock: number;
}

// 1. Критический интерактивный компонент: кнопка покупки
function BuyActionPanel({ price, initialStock }: { price: number; initialStock: number }) {
  const [stock, setStock] = useState(initialStock);
  const [isAdded, setIsAdded] = useState(false);

  const handlePurchase = () => {
    if (stock > 0) {
      setStock((s) => s - 1);
      setIsAdded(true);
    }
  };

  return (
    <div className="p-4 bg-bg-elevated border border-border rounded-lg space-y-3">
      <div className="flex justify-between items-center">
        <span className="text-2xl font-bold text-accent-cyan">${price}</span>
        <span className="text-xs text-text-muted">В наличии: {stock} шт.</span>
      </div>
      <button
        type="button"
        onClick={handlePurchase}
        disabled={stock === 0}
        className="w-full py-3 bg-accent-cyan text-bg-surface font-bold rounded-md hover:opacity-90 disabled:opacity-40 transition-opacity"
      >
        {isAdded ? 'Добавлено в корзину!' : 'Купить в 1 клик'}
      </button>
    </div>
  );
}

export function ProductCommerceView({ product }: { product: ProductProps }) {
  return (
    <div className="max-w-4xl mx-auto p-6 space-y-8">
      <header className="space-y-2">
        <h1 className="text-3xl font-extrabold text-text-primary">{product.name}</h1>
        <p className="text-sm text-text-muted">Артикул: {product.id}</p>
      </header>

      {/* 
        ЗОНА 1: Критический блок покупки. 
        Не обернут в lazy, гидрируется в первую очередь!
      */}
      <BuyActionPanel price={product.price} initialStock={product.initialStock} />

      {/* 
        ЗОНА 2: Кастомизация цвета. 
        Изолирована границей Suspense. Если пользователь кликнет по цветам,
        React мгновенно гидрирует этот блок вне общей очереди!
      */}
      <Suspense fallback={<div className="h-24 bg-bg-elevated/40 rounded animate-pulse" />}>
        <DynamicColorCustomizer productId={product.id} />
      </Suspense>

      {/* 
        ЗОНА 3: Тяжелый блок отзывов. 
        Будет гидрироваться в фоновом режиме (IdleLane) в последнюю очередь,
        не задерживая готовность кнопок покупки.
      */}
      <Suspense fallback={<div className="h-64 bg-bg-elevated/40 rounded animate-pulse" />}>
        <HeavyReviewSection productId={product.id} />
      </Suspense>

      {/* ЗОНА 4: Рекомендации */}
      <Suspense fallback={<div className="h-48 bg-bg-elevated/40 rounded animate-pulse" />}>
        <InteractiveSimilarProducts productId={product.id} />
      </Suspense>
    </div>
  );
}

[ Страница: Root Document ]
  ├── <Header />                  --> Гидратация успешна: DOM сохранен
  ├── <Suspense> (Остров виджета) --> ОШИБКА: Hydration Mismatch!
  │                                   React локально сбрасывает ТОЛЬКО этот остров
  │                                   и перерисовывает его на клиенте.
  └── <Footer />                  --> Гидратация успешна: DOM сохранен