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

[ Серверний HTML завантажено в браузер ]
  ├── <Header />                  --> Чанк JS завантажено: [ Гідратовано (Interactive) ]
  ├── <Suspense> (Острів Товару)   --> Чанк JS завантажено: [ Фонова гідратація...      ]
  └── <Suspense> (Острів Відгуків) --> Чанк 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 збережено