하이드레이션과 렌더링 전략별 차이

1. 기본 전략

• Static Generation (SSG): 빌드 타임에 HTML을 미리 생성 → CDN에서 초고속 서빙. ISR(Incremental Static Regeneration)로 freshness 문제 해결 (revalidate). Edge Rendering으로 지연도 최소화.
• Client-Side Rendering (CSR / SPA): 서버는 빈 shell만 주고, 클라이언트에서 JS 번들 + 데이터 페칭 후 모든 UI 생성. 하이드레이션 없음. 하지만 첫 페인트 느리고 SEO 불리.
• Server-Side Rendering (SSR): 서버에서 HTML 생성 후 클라이언트에서 하이드레이션 (React가 DOM에 이벤트 핸들러 등 붙임). 콘텐츠 즉시 보이고 SEO 좋지만, 작업 중복 (서버 렌더 → 클라이언트 재렌더)과 하이드레이션 mismatch 문제가 있음.

2. 현대적 개선 전략

• Streaming SSR + Suspense: 페이지 전체를 기다리지 않고 청크 단위로 스트리밍. Suspense boundary로 느린 부분(skeleton) 분리 → perceived performance 크게 향상. Progressive hydration (스크롤/인터랙션 시 지연 하이드레이션) 결합 가능.
• Islands Architecture (Astro 대표): 대부분 정적 HTML로 두고, 인터랙티브한 부분만 "섬"처럼 JS + 하이드레이션. client:visible, client:load 등 directive로 제어. JS 번들 최소화에 최고 (콘텐츠 중심 사이트: 블로그, docs, 마케팅 페이지에 이상적).
• React Server Components (RSC): 서버 전용 컴포넌트는 클라이언트에 JS 전혀 안 보냄 (Flight 형식으로 UI 설명만 직렬화). "use client"만 JS 번들. DB 직접 쿼리 가능, 번들 크기 대폭 감소. Partial Prerendering (React 19)으로 static shell + dynamic hole 결합.
• 기타:
  • Fine-grained reactivity (e.g. Solid): 한 번 하이드레이션 후 re-render 거의 없음.
  • Resumability (Qwik): 하이드레이션 자체를 거의 안 함.
  • TanStack Start: ownership flipped 접근.
  • Next.js 16.3: Instant navigations 등으로 마지막 갭 메움.

선택 가이드 (How to actually choose)

• 콘텐츠 중심 (블로그, docs, 마케팅): SSG/Islands/Astro
• 인터랙티브 앱 (대부분 동적): RSC + Streaming SSR (Next.js)
• 극한 성능: Fine-grained/Resumability 고려
• 항상 Lighthouse 점수, JS 번들 크기, 인터랙션 지연을 기준으로 판단.

 

 

출처: "Different hydration and rendering strategies" (Neciu Dan, 2026.6.28)

웹 앱의 초기 로딩 속도와 인터랙티브성 사이의 트레이드오프를 해결하기 위해 진화해 온 다양한 렌더링 + 하이드레이션 전략을 체계적으로 비교·설명합니다. 핵심은 "HTML이 보이는 순간"과 "실제로 클릭이 되는 순간" 사이의 갭(하이드레이션)을 줄이는 것.

모든 페이지를 하나의 전략으로 해결하려 하지 말고, 페이지 특성에 맞게 (또는 부분별로) 최적의 조합을 선택.