Web
웹 애플리케이션 렌더링 아키텍처 이해
SSR, CSR, SSG, ISR 등 현대 웹 애플리케이션의 주요 렌더링 방식의 동작 원리와 특징, 상황별 선택 기준 정리
🔍 1. 렌더링 모드별 핵심 매커니즘
CSR (Client-Side Rendering)
- 구동 원리: 서버는 데이터가 없는 텅 빈
<body>태그와 자바스크립트(JS) 번들 파일 링크만 포함된 최소한의 HTML을 클라이언트에 내려준다. 브라우저가 이 JS 파일을 다운로드하고 실행하는 시점에 API 요청을 보내 데이터를 받아오고 화면을 동적으로 그려낸다. - 장점: 첫 로딩 이후 페이지 이동 시 서버에 새 HTML을 요청하지 않고 필요한 데이터만 바꾸므로 앱처럼 매끄러운 사용자 경험(UX)을 제공한다. 서버 연산 부담이 가장 적다.
- 단점: 대용량 JS 파일을 모두 다운로드할 때까지 사용자는 흰 화면(Blank Page)을 보게 된다. HTML 뼈대가 비어있어 검색 엔진 봇이 콘텐츠를 긁어가지 못하므로 SEO(검색 엔진 최적화)에 매우 불리하다.
SSR (Server-Side Rendering)
- 구동 원리: 사용자가 특정 URL에 접속할 때마다 서버(Node.js 등)가 동적으로 데이터베이스나 API 서버에서 데이터를 긁어온다. 그 후 서버 메모리 상에서 HTML 뼈대에 데이터를 결합하여 완벽히 완성된 HTML 스트림을 빌드한 뒤 브라우저에 던져준다.
- 장점: 브라우저가 HTML을 받자마자 화면을 바로 그릴 수 있어 초기 콘텐츠 표시 속도(FCP)가 매우 빠르다. 완성된 HTML을 제공하므로 크롤러 로봇이 페이지를 완벽하게 인식하여 SEO에 최적화된다.
- 단점: 사용자가 페이지를 이동하거나 새로고침할 때마다 서버가 매번 실시간으로 화면을 새로 연산해서 빌드하므로, 트래픽이 몰리면 서버 부하가 급격히 증가하고 인프라 유지 비용이 커진다.
SSG (Static Site Generation)
- 구동 원리: 사용자의 요청 시점이 아니라, 개발자가 코드를 빌드하고 배포하는 시점(Build Time)에 가용한 모든 페이지의 HTML을 미리 정적으로 구워둔다. 배포가 완료되면 서버는 이미 만들어진 HTML static 파일들을 CDN을 통해 유저에게 배달만 한다.
- 장점: 서버가 실시간으로 화면을 연산할 필요가 전혀 없으므로 보안성이 극도로 높고 속도가 압도적으로 빠르다. AWS S3나 Netlify, Vercel 같은 정적 호스팅 환경이나 CDN 캐싱을 적극 활용할 수 있어 인프라 비용이 거의 제로에 가깝다.
- 단점: 데이터가 변경되면 정적 파일들을 다시 만들기 위해 전체 프로젝트를 '다시 빌드하고 배포'해야 한다. 수만 개의 상품 페이지가 있는 커머스처럼 페이지 수가 너무 많으면 빌드하는 데 수 시간이 걸려 실시간 데이터 반영이 불가능하다.
ISR (Incremental Static Regeneration)
- 구동 원리: SSG의 치명적인 한계(실시간성 부족)를 극복하기 위해 등장한 하이브리드 방식이다. 전체 페이지를 빌드 시점에 미리 만들어두는 것은 SSG와 같지만, 각 페이지마다 유효 기간(예: 60초)을 설정한다. 유효 기간이 지난 후 유저가 방문하면 서버가 백그라운드에서 해당 페이지를 딱 한 번만 새로 빌드하여 정적 파일을 조용히 업데이트한다.
- 장점: SSG의 압도적인 속도와 비용 절감 장점을 그대로 누리면서, 주기적으로 데이터가 자동으로 최신화되므로 대규모 블로그나 트래픽이 높은 뉴스 사이, 상품 목록 페이지에 이상적이다.
- 단점: 첫 번째 유효 기간 만료 직후 방문한 사용자는 백그라운드에서 빌드가 도는 동안 '이전 버전(Stale)의 정적 화면'을 보게 되는 데이터 시차가 발생할 수 있다.
📊 2. 아키텍처 지표별 비교 매트릭스
| 비교 지표 | CSR | SSR | SSG | ISR |
|---|---|---|---|---|
| HTML 생성 시점 | 브라우저 런타임 (실시간) | 사용자 요청 시점 (On-Demand) | 프로젝트 빌드 타임 (사전 생성) | 빌드 타임 + 주기적 백그라운드 생성 |
| 초기 로딩 속도 (FCP) | 느림 (JS 로딩 대기) | 빠름 | 매우 빠름 | 매우 빠름 |
| SEO 최적화 수준 | 낮음 (자동 크롤링 제한) | 매우 높음 | 매우 높음 | 매우 높음 |
| 실시간 데이터 동기화 | 완벽함 (클라이언트 통신) | 완벽함 (요청 시점 반영) | 불가능 (재배포 필요) | 우수함 (지정 주기 준수) |
| 인프라 비용 및 부하 | 매우 낮음 | 매우 높음 (컴퓨팅 지속) | 가장 낮음 (CDN 호스팅) | 낮음 (간헐적 백그라운드 연산) |
💡 3. 비즈니스 시나리오별 최적의 선택 가이드
- 대시보드 / 사내 관리자 페이지 (Admin): 외부 검색 엔진에 노출될 필요가 전혀 없고, 사용자와의 잦은 인터랙션 및 실시간 데이터 차트 반영이 핵심이므로 CSR이 가장 적합하다.
- 커뮤니티 / 마이페이지 / 실시간 금융 정보: 사용자 로그인 상태에 따라 화면이 매번 다르게 바뀌어야 하고, 공유 링크나 보안, 실시간성이 생명인 영역은 SSR이 강제된다.
- 공식 가이드 문서 / 기업 소개 / 블로그: 데이터가 한 달에 몇 번 바뀔까 말까 하며, 전 세계 유저에게 초고속으로 문서를 뿌려야 하고 SEO가 최우선인 기술 위키나 도큐먼트 사이트는 SSG가 절대적인 정답이다.
- 대규모 커머스 상품 카탈로그 / 실시간 뉴스 매체: 수천 수만 개의 정적 페이지 속도를 유지하면서 한 시간 혹은 하루 단위로 가격 정보나 기사를 업데이트해야 할 때는 ISR 아키텍처를 도입하는 것이 최선이다.