웹 렌더링 전략과 성능

1. 주요 개념 및 용어 정의

Rendering: 코드를 사용자가 볼 수 있는 화면(HTML/DOM)으로 변환하는 과정
SSR (Server-Side Rendering): 서버에서 요청 시점에 HTML을 생성하여 전달
CSR (Client-Side Rendering): 브라우저에서 JavaScript를 실행해 DOM을 동적으로 생성
Static Rendering (SSG): 빌드 시점에 미리 HTML을 생성 (Next.js의 기본 배포 방식)
Hydration: 서버로부터 받은 정적 HTML에 JavaScript 이벤트 리스너를 결합하여 대화형 상태로 만드는 과정
Rehydration: Hydration과 혼용되나, 정확히는 서버 상태와 클라이언트 상태를 다시 맞추는(Re-sync) 과정을 강조할 때 사용

TTFB (Time to First Byte): 서버 응답의 첫 번째 바이트가 도착하기까지의 시간 (서버 성능/거리 영향)
FCP (First Contentful Paint): 화면에 의미 있는 첫 콘텐츠가 나타나는 시간
INP (Interaction to Next Paint): 사용자의 클릭/입력에 페이지가 얼마나 빨리 반응하는지 측정 (Interaction 일관성 평가)
TBT (Total Blocking Time): 메인 스레드가 차단되어 사용자 입력에 응답할 수 없는 총 시간

서버에서 요청마다 페이지 전체 HTML을 생성하여 전달합니다. 클라이언트에서 템플릿을 생성하거나 추가 데이터를 요청하는 작업을 최소화합니다.

특징 및 성능: 일반적으로 빠른 FCP를 제공합니다. 서버에서 전체 렌더링을 마치므로 클라이언트에 전송하는 JS 양이 적어 TBT를 줄이고 INP를 개선할 수 있습니다.
CPU 효율: 사용자 기기에서 CPU-bound JS가 실행될 때까지 기다리지 않아도 됩니다. First-party JS 비용이 줄어들어 웹 예산을 효율적으로 사용할 수 있습니다.
한계: 서버에서 직접 페이지를 생성하는 시간이 소요되므로 TTFB가 높아질 수 있습니다. 이를 해결하기 위해 많은 사이트가 Hybrid Rendering 기술을 도입합니다.
장점: SEO 최적화에 적합하며, 요청 시 모든 콘텐츠가 포함되어 뛰어난 사용자 경험을 제공합니다.
단점: 서버 비용이 높고, 서버 다운 시 서비스 전체가 중단될 위험이 있습니다.

빌드 타임에 페이지 HTML을 미리 생성해두고 요청 시 전달하는 방식입니다.

특징 및 성능: 클라이언트 JS 양이 적다는 가정하에 매우 빠른 FCP와 낮은 TBT/INP를 제공합니다. 동적으로 HTML을 생성하지 않으므로 지속적으로 빠른 TTFB 달성이 가능합니다.
배포 전략: 각 URL에 대해 개별 HTML 파일을 미리 생성하므로, CDN 배포를 통한 Edge Caching 활용에 최적화되어 있습니다.
Prerendering과의 차이: Static Rendering은 많은 클라이언트 JS 없이도 상호작용이 가능한 상태로 생성되지만, Prerendering된 페이지는 모든 기능을 사용하기 위해 클라이언트 측 JS 실행이 필수적입니다.
장점: SEO에 유리하며 신뢰성, 성능, 보안, 확장성이 뛰어납니다. 비용이 저렴하고 호스팅 이동이 용이합니다.
단점: 변경 사항 발생 시 전체 웹사이트를 다시 배포해야 하며, 고유 페이지가 너무 많은 사이트에서는 관리가 까다로울 수 있습니다.

브라우저에서 JS로 페이지를 직접 렌더링합니다. 데이터 검색, 논리 관리, 라우팅 등 모든 처리가 클라이언트에서 수행됩니다.

특징 및 성능: 서버 부하는 낮지만, 앱이 커질수록 JS 양이 증가하여 INP에 부정적인 영향을 줍니다. 컴퓨팅 파워가 낮은 기기에서는 속도가 현저히 느려질 수 있습니다.
최적화: 대규모 JS 번들을 사용할 경우 TBT/INP를 낮추기 위해 코드 분할(Code Splitting)과 지연 로딩(Lazy Loading)이 필수적입니다.
장점: 빠른 피드백과 원활한 사용자 경험(SPA)을 제공하며 서버 비용이 저렴합니다.
단점: 사용자 경험 저하 위험이 있고, 검색 엔진 로봇이 콘텐츠를 색인화하기 어려워 SEO에 불리합니다. JS 비활성화 시 페이지 노출이 불가능합니다.

SSR과 CSR을 결합하여 각 방식의 장점을 취하려는 시도입니다. 탐색 요청 시 서버에서 렌더링된 HTML을 먼저 전달하고, 렌더링에 사용된 데이터와 JS를 문서에 삽입합니다.

성능적 특징: SSR과 같은 빠른 FCP를 달성하면서 선택적 렌더링이 가능합니다.
잠재적 위험: 로드 직후 페이지가 상호작용 가능한 것처럼 보이지만, 실제로는 클라이언트 스크립트 실행 및 이벤트 핸들러 연결이 완료될 때까지 작동하지 않는 '불쾌한 골짜기' 구간이 발생하여 TBT/INP에 악영향을 줄 수 있습니다.

렌더링 방식을 한 줄로 요약하면 다음과 같습니다.