Angular로 웹 애플리케이션을 개발하다 보면 필연적으로 초기 로딩 속도와 SEO(검색 엔진 최적화) 문제에 직면하게 됩니다. 기본적으로 Angular는 클라이언트 사이드 렌더링(CSR) 방식을 사용하기 때문인데요.
이 문제를 해결하기 위해 도입하는 두 가지 핵심 렌더링 전략, **SSR(Server-Side Rendering)**과 **SSG(Static Site Generation, 사전 렌더링)**에 대해 완벽하게 정리해 보겠습니다.
1. 기본 개념: 왜 SSR과 SSG가 필요할까?
일반적인 Angular 앱(CSR)은 처음에 텅 빈 HTML을 다운로드한 뒤, 브라우저가 무거운 JavaScript를 모두 실행해야 화면이 나타납니다.
- 문제점: 검색 엔진 봇이 빈 화면만 보고 사이트를 이탈할 수 있으며(SEO 악화), 사용자 입장에서는 초기 화면이 뜨기까지 흰 화면을 오래 봐야 합니다.
- 해결책: 서버나 빌드 단계에서 미리 완성된 HTML을 만들어두자! 이것이 바로 SSR과 SSG의 핵심입니다.
2. 서버 사이드 렌더링 (SSR, Server-Side Rendering)
SSR은 사용자가 페이지를 요청할 때마다 서버에서 Angular 애플리케이션을 실행하여 완성된 HTML을 만들어 브라우저로 보내는 방식입니다. (Angular에서는 과거 'Angular Universal'로 불렸으며, 최근 버전에서는 @angular/ssr 패키지로 통합되었습니다.)
✨ 장점
- 완벽한 SEO: 검색 엔진 봇이 완전히 렌더링된 HTML을 바로 읽을 수 있습니다.
- 빠른 초기 렌더링(FCP): 사용자가 빈 화면 대신 완성된 UI를 훨씬 빠르게 볼 수 있습니다.
- 동적 데이터 처리: 요청 시점에 렌더링하므로, 실시간으로 변하는 데이터(예: 뉴스 피드, 주식 정보, 개인화된 대시보드)를 즉각 반영할 수 있습니다.
🚨 단점
- 서버 부하: 모든 요청마다 서버에서 렌더링 작업을 수행해야 하므로 컴퓨팅 리소스 비용이 증가합니다.
- TTFB(Time To First Byte) 증가: 서버가 렌더링을 마칠 때까지 기다려야 하므로, 서버 성능이 떨어지면 첫 응답 속도가 느려질 수 있습니다.
3. 정적 사이트 생성 (SSG, Static Site Generation / Prerendering)
SSG는 사용자가 요청할 때가 아니라, 앱을 빌드(Build)하는 시점에 미리 각 라우트별로 완성된 정적 HTML 파일들을 만들어 두는 방식입니다. Angular에서는 이를 **Prerendering(사전 렌더링)**이라고 부릅니다.
✨ 장점
- 압도적인 로딩 속도: 이미 완성된 HTML 파일을 CDN을 통해 쏘아주기만 하면 되므로 응답 속도가 매우 빠릅니다.
- 서버 비용 절감: 렌더링을 위한 백엔드 서버가 필요 없으며, 저렴한 정적 웹 호스팅(GitHub Pages, AWS S3, Vercel 등)만으로 충분합니다.
- 뛰어난 보안성과 안정성: DB나 백엔드 로직이 직접 노출되지 않으며, 트래픽이 몰려도 CDN 캐싱으로 쉽게 방어할 수 있습니다.
🚨 단점
- 동적 데이터 반영 어려움: 빌드 시점의 데이터를 캡처하므로, 데이터가 자주 바뀌는 사이트에는 부적합합니다. 내용이 바뀌면 전체 사이트를 다시 빌드해야 합니다.
- 빌드 시간 증가: 페이지 수가 많아질수록 빌드하는 데 걸리는 시간이 기하급수적으로 늘어납니다.
4. 한눈에 보는 비교 (CSR vs SSR vs SSG)
| 구분 | CSR (Client-Side) | SSR (Server-Side) | SSG (Static Site) |
| 렌더링 시점 | 브라우저 (요청 후) | 서버 (요청 시) | 서버 (빌드 시) |
| SEO 최적화 | 나쁨 | 매우 좋음 | 매우 좋음 |
| 초기 로딩 속도 | 느림 | 빠름 | 매우 빠름 |
| 서버 유지비용 | 낮음 | 높음 | 낮음 (CDN 활용) |
| 적합한 서비스 | 어드민 페이지, 대시보드 | 뉴스 웹사이트, 쇼핑몰 | 블로그, 회사 소개 페이지 |
5. Angular에서 SSR / SSG 적용하기
최근 Angular(버전 17 이상)에서는 SSR과 SSG 적용이 놀라울 정도로 쉬워졌습니다.
새 프로젝트를 생성할 때:
ng new my-app --ssr
기존 프로젝트에 추가할 때:
ng add @angular/ssr
이 명령어 하나로 SSR 관련 설정이 프로젝트에 자동으로 구성됩니다. 이후 angular.json의 prerender 옵션을 통해 SSG를 함께 설정할 수 있습니다.
📝 마무리 요약
- 실시간으로 변하는 데이터가 중요하고 SEO가 필수라면 👉 SSR
- 변경이 적은 정적 콘텐츠 위주이고 극강의 속도/비용 절감을 원한다면 👉 SSG
- SEO가 필요 없는 내부 관리자용 시스템이라면 👉 기존 CSR
프로젝트의 성격과 예산, 데이터의 변경 주기를 고려하여 가장 알맞은 렌더링 전략을 선택해 보세요!
'IT관련' 카테고리의 다른 글
| 🚀 GitHub Issue 관리: Create Sub-issue vs Add Existing Issue (0) | 2026.02.24 |
|---|---|
| 시댄스 2.0(Seedance 2.0) 완전 정리 (0) | 2026.02.21 |
| [Linux] 리눅스 스왑(Swap) 메커니즘 완벽 이해하기 (0) | 2026.02.05 |
| [SSMS 팁] 시작 시 '서버에 연결' 창 안 뜨게 설정하는 방법 (0) | 2026.02.03 |
| Apache Tomcat 설정값 정리 (0) | 2026.01.30 |