Progressive Hydration (HydrateOnVisible)

#29RenderingMedium

Progressive Hydration (HydrateOnVisible)

Progressive Hydration

뷰포트에 들어올 때까지 자식의 이벤트 핸들러를 붙이지 않는 <HydrateOnVisible /> 를 구현하세요.

실제 IntersectionObserver 대신, 테스트 가능성을 위해 visible: boolean prop으로 시각화 여부를 주입합니다.

Props

interface HydrateOnVisibleProps {
  visible: boolean;
  children: React.ReactNode;
}

동작

visible === true → 자식을 그대로 렌더하고 핸들러도 정상 동작 (hydrated).
visible === false → 자식 마크업은 동일하게 그리되, 자식이 단일 element면 onClick 을 undefined 로 덮어써 클릭이 무시되도록 (un-hydrated).
래퍼는 data-hydrated 속성으로 상태를 노출 ("true" | "false").

학습 포인트

SSR로 마크업은 즉시 보여주되, 인터랙티브 코드는 늦게 연결
React.cloneElement 로 자식 props 가로채기
점진적 활성화로 TTI 개선

import { cloneElement, isValidElement, ReactNode } from 'react';

export interface HydrateOnVisibleProps {
  visible: boolean;
  children: ReactNode;
}

export function HydrateOnVisible({ visible, children }: HydrateOnVisibleProps) {
  // TODO: visible === true 면 children을 그대로 렌더하고 data-hydrated="true"
  // TODO: visible === false 면 자식이 단일 element일 때 onClick을 undefined로 덮어쓰고 data-hydrated="false"
  return (
    <div data-hydrated="false">
      {children}
    </div>
  );
}

Open Sandbox

Sandpack 로드 중…

import { cloneElement, isValidElement, ReactNode } from 'react';

export interface HydrateOnVisibleProps {
  visible: boolean;
  children: ReactNode;
}

export function HydrateOnVisible({ visible, children }: HydrateOnVisibleProps) {
  // TODO: visible === true 면 children을 그대로 렌더하고 data-hydrated="true"
  // TODO: visible === false 면 자식이 단일 element일 때 onClick을 undefined로 덮어쓰고 data-hydrated="false"
  return (
    <div data-hydrated="false">
      {children}
    </div>
  );
}

Open Sandbox