Next.js App router 렌더링 이해하기

Next.js

• Client Component
  • 빌드 시 생성한 HTML과 CSS 파일을 줌
  • 장점
    • 초기 페이지 보이는 속도(FCP)가 빠름
  • 단점
    • 전체 컴포넌트 렌더링 로직 번들이 클라이언트로 전송됨
    • TTI 느림
• Server Component
  • 컴포넌트 렌더링 로직을 클라로 보내지 않고 렌더링 결과물(HTML/CSS)만 줌
  • 빌드 시점에 미리 렌더링 후 결과물(HTML/CSS)을 CDN 캐싱
  • 장점
    • js 번들 크기 감소
  • 단점
    • cookie, searchParams 등 Dynamic API 사용 시 dynamic 페이지로 강제 전환됨
    • 렌더링 결과물 캐싱 불가
    • FCP/LCP 증가
• Streaming
  • 요청 시점에 정적 부분은 렌더링 완료된 즉시 클라로 전송
  • DB 조회 또는 API 호출이 필요한 동적 컴포넌트는 해당 작업이 완료된 이후에 클라로 전송
  • 장점
    • FCP 감소
  • 단점
    • 여전히 렌더링 결과물 캐싱 불가
    • LCP 증가
• Partial Prerendering
  • 빌드 시점에 정적 부분은 미리 렌더링 후 결과물(HTML/CSS) CDN 캐싱
  • 동적 컴포넌트는 DB 조회 또는 API 호출 등 작업이 완료된 이후에 클라로 전송
  • 즉, Static + Dynamic 혼합 페이지 생성 가능
  • 장점
    • 렌더링 결과물 캐싱 가능
    • FCP 감소
  • 단점
    • 아직 canary 출시 단계
    • LCP 증가 → 지연 로딩 특성상 솔직히 어쩔 수 없음