React 하이드레이션, 모든 컴포넌트를 동시에 깨울 필요 없습니다 — Next.js에서 MRAH로 TTI를 개선하는 방법

// 루트 컴포넌트 전체를 한 번에 하이드레이션
hydrateRoot(document.getElementById('root'), <App />);
// → 네비게이션, 메인 콘텐츠, 추천 위젯, 댓글, 푸터 모두 동시 처리

import { lazy, Suspense } from 'react';
 
// 비핵심 섹션을 독립된 청크로 분리
const ReviewSection = lazy(() => import('./ReviewSection'));
const RecommendedProducts = lazy(() => import('./RecommendedProducts'));
const Footer = lazy(() => import('./Footer'));
 
function ProductPage() {
  return (
    <>
      {/* HeroSection은 lazy() 없이 직접 import — 즉시 렌더링 필요 */}
      <HeroSection />
 
      {/* 각 모듈이 독립적으로 로드·하이드레이션됨 */}
      <Suspense fallback={<ReviewSkeleton />}>
        <ReviewSection />
      </Suspense>
 
      <Suspense fallback={<ProductSkeleton />}>
        <RecommendedProducts />
      </Suspense>
 
      <Suspense fallback={null}>
        <Footer />
      </Suspense>
    </>
  );
}

import { useEffect, useRef, useState } from 'react';
 
function useVisibilityHydration() {
  const ref = useRef<HTMLDivElement>(null);
  const [shouldHydrate, setShouldHydrate] = useState(false);
 
  useEffect(() => {
    if (!ref.current) return;
 
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setShouldHydrate(true);
          observer.disconnect(); // 한 번 진입하면 해제
        }
      },
      { rootMargin: '200px' } // 뷰포트 200px 전부터 준비
    );
 
    observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);
 
  return { ref, shouldHydrate };
}

import dynamic from 'next/dynamic';
import LazyHydrate from 'react-lazy-hydration';
 
// next/dynamic: 번들을 별도 청크로 분리 (코드 스플리팅 담당)
// LazyHydrate: 로드된 컴포넌트를 언제 하이드레이션할지 제어
// 두 역할이 서로 다르므로 함께 써도 충돌 없이 동작합니다.
const ReviewSection = dynamic(() => import('./ReviewSection'), {
  // ssr 기본값은 true — SSR HTML을 그대로 유지합니다
  loading: () => <ReviewSkeleton />,
});
 
const RecommendedSlider = dynamic(() => import('./RecommendedSlider'), {
  loading: () => <SliderSkeleton />,
});
 
const Footer = dynamic(() => import('./Footer'), {
  loading: () => null,
});
 
export default function ProductPage() {
  return (
    <main>
      {/* 즉시 하이드레이션 — 구매 플로우 핵심 영역 */}
      <ProductHero />
      <AddToCartButton />
 
      {/* 뷰포트 진입 시 하이드레이션 */}
      <LazyHydrate whenVisible>
        <ReviewSection />
      </LazyHydrate>
 
      <LazyHydrate whenVisible>
        <RecommendedSlider />
      </LazyHydrate>
 
      {/* 브라우저 유휴 시 하이드레이션 */}
      <LazyHydrate whenIdle>
        <Footer />
      </LazyHydrate>
    </main>
  );
}

// TypeScript strict mode에서 Network Information API를 안전하게 사용하는 타입 선언
type NetworkInformation = {
  effectiveType?: '2g' | '3g' | '4g' | 'slow-2g';
};
 
function useAdaptiveHydration() {
  const nav = navigator as Navigator & { connection?: NetworkInformation };
  const connection = nav.connection;
 
  // Firefox/Safari는 connection이 undefined — 없으면 고속 네트워크로 간주
  const isSlowNetwork =
    connection?.effectiveType === '2g' ||
    connection?.effectiveType === 'slow-2g';
 
  // 논리 코어 수로 저사양 기기 감지 (프라이버시 모드에서 제한될 수 있음)
  const isLowEndDevice = (navigator?.hardwareConcurrency ?? 4) <= 2;
 
  return {
    shouldDefer: isSlowNetwork || isLowEndDevice,
    isSlowNetwork,
    isLowEndDevice,
  };
}
 
function HeavyWidget() {
  const { shouldDefer } = useAdaptiveHydration();
 
  if (shouldDefer) {
    // 저사양 환경: 정적 HTML만 렌더링, JS 하이드레이션 생략
    return <StaticFallback />;
  }
 
  return <FullInteractiveWidget />;
}

import { startTransition, useState, useEffect, useRef } from 'react';
 
// IntersectionObserver를 래핑한 가시성 트리거 컴포넌트
function VisibilityTrigger({
  onVisible,
  children,
}: {
  onVisible: () => void;
  children: React.ReactNode;
}) {
  const ref = useRef<HTMLDivElement>(null);
 
  useEffect(() => {
    if (!ref.current) return;
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          onVisible();
          observer.disconnect();
        }
      },
      { rootMargin: '200px' }
    );
    observer.observe(ref.current);
    return () => observer.disconnect();
  }, [onVisible]);
 
  return <div ref={ref}>{children}</div>;
}
 
function ProductPage() {
  const [showReviews, setShowReviews] = useState(false);
 
  const handleReviewsVisible = () => {
    // 리뷰 하이드레이션을 긴급하지 않은 작업으로 표시
    startTransition(() => {
      setShowReviews(true);
    });
  };
 
  return (
    <>
      <ProductHero />
      <VisibilityTrigger onVisible={handleReviewsVisible}>
        {showReviews ? <ReviewSection /> : <ReviewSkeleton />}
      </VisibilityTrigger>
    </>
  );
}