Hidratación selectiva y priorización interactiva en Suspense

[ HTML del servidor recibido en el navegador ]
  ├── <Header />                  --> Chunk JS cargado: [ Hidratado (Interactivo)    ]
  ├── <Suspense> (Isla Producto)  --> Chunk JS cargado: [ Hidratando en fondo...     ]
  └── <Suspense> (Isla Reseñas)   --> Chunk JS en red:  [ Esperando descarga JS...  ]

+----------------- [ Acción de usuario: ¡CLIC! ] -----------------+
¡El usuario hace clic en "Comprar" dentro de la [ Isla Producto ]!
  1. El listener raíz en document captura el click/pointerdown.
  2. El motor Fiber detecta que el nodo destino está en estado dehydrated.
  3. React escala la prioridad de la [ Isla Producto ] a SyncLane.
  4. La tarea en segundo plano se interrumpe; la Isla Producto se hidrata síncronamente.
  5. El mecanismo Event Replay reproduce el evento de clic capturado.
  6. ¡El estado del carrito se actualiza sin retardo perceptible para el usuario!
+------------------------------------------------------------------+

interface QueuedDiscreteEvent {
  blockedOn: FiberNode | null; // Nodo Fiber cuya hidratación bloquea el evento
  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);

  // Si el nodo Fiber objetivo sigue deshidratado
  if (targetFiber !== null && isFiberDehydrated(targetFiber)) {
    // 1. Bloquear acción nativa por defecto y propagación
    event.preventDefault();
    event.stopPropagation();

    // 2. Almacenar evento en la cola de reproducción
    queuedDiscreteEvents.push({
      blockedOn: targetFiber,
      domEventName,
      event,
      targetContainer,
    });

    // 3. ESCALADA DE PRIORIDAD: ¡Forzar hidratación inmediata de este subárbol!
    // El nodo se promueve de IdleLane a SyncLane
    escalateHydrationPriority(targetFiber);
    return;
  }

  // Despacho síncrono estándar para nodos ya hidratados
  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) {
      // Reproducir el evento guardado sobre el DOM ya interactivo
      queued.targetContainer.dispatchEvent(queued.event);
      queuedDiscreteEvents.splice(i, 1);
      i--;
    }
  }
}

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

// Carga diferida de módulos interactivos pesados en chunks JS separados
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. Componente interactivo prioritario: Panel de compra
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">En stock: {stock} unidades</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 ? '¡Añadido al carrito!' : 'Comprar ahora'}
      </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">Referencia: {product.id}</p>
      </header>

      {/* 
        ZONA 1: Panel crítico de compra.
        No está envuelto en lazy; ¡se hidrata el primero con máxima prioridad!
      */}
      <BuyActionPanel price={product.price} initialStock={product.initialStock} />

      {/* 
        ZONA 2: Personalizador de color.
        Aislado mediante Suspense. Si el usuario pulsa los colores antes de tiempo,
        ¡React escala su prioridad a SyncLane de forma inmediata!
      */}
      <Suspense fallback={<div className="h-24 bg-bg-elevated/40 rounded animate-pulse" />}>
        <DynamicColorCustomizer productId={product.id} />
      </Suspense>

      {/* 
        ZONA 3: Sección pesada de opiniones.
        Se hidrata en segundo plano (IdleLane) sin retrasar la respuesta de compra.
      */}
      <Suspense fallback={<div className="h-64 bg-bg-elevated/40 rounded animate-pulse" />}>
        <HeavyReviewSection productId={product.id} />
      </Suspense>

      {/* ZONA 4: Productos recomendados */}
      <Suspense fallback={<div className="h-48 bg-bg-elevated/40 rounded animate-pulse" />}>
        <InteractiveSimilarProducts productId={product.id} />
      </Suspense>
    </div>
  );
}

[ Página: Documento Raíz ]
  ├── <Header />                  --> Hidratación exitosa: DOM del servidor intacto
  ├── <Suspense> (Isla Widget)    --> ERROR: ¡Hydration Mismatch!
  │                                   React descarta y re-renderiza ÚNICAMENTE esta isla
  │                                   en el cliente de forma aislada.
  └── <Footer />                  --> Hidratación exitosa: DOM del servidor intacto