Angular SSR(Universal)은 무엇을 제공하나요?

Question

Accepted Answer

**Angular SSR**(역사적으로 Angular Universal이라 불림)은 빈 페이지를 보내 브라우저가 JavaScript로 채우게 하는 대신, 초기 요청에 대해 앱의 HTML을 **서버에서** 렌더링합니다. 이는 SEO, 체감 성능, 첫 페인트를 개선합니다. ## SSR이 해결하는 문제 ```text 클라이언트 측 렌더링 (기본 SPA): 서버가 빈 + JS 번들을 보냄 → 브라우저가 Angular를 다운로드 & 실행 → 그제서야 콘텐츠가 나타남 → 느린 첫 페인트; 크롤러/소셜 봇이 빈 페이지를 볼 수 있음 서버 측 렌더링: 서버가 Angular를 실행하고, 완전히 렌더링된 HTML을 보냄 → 콘텐츠가 즉시 보임 → Angular가 이를 "하이드레이션"하여 상호작용 가능하게 함 ``` SSR을 사용하면 서버가 완전한 HTML을 생성하므로 사용자와 검색 엔진이 즉시 실제 콘텐츠를 받습니다. 그 후 Angular는 이벤트 리스너를 부착(하이드레이션)하여 상호작용 가능하게 만듭니다. ## 설정하기 ```bash ng add @angular/ssr # 기존 앱에 서버 렌더링을 추가 ``` 이는 서버에서 Angular를 렌더링하고 사전 렌더링된 HTML을 제공하는 Node/Express 서버를 생성합니다. ## SSR이 제공하는 것 ```text ✓ 더 나은 SEO — 크롤러가 완전한 콘텐츠를 받음 (콘텐츠/마케팅 사이트에 결정적) ✓ 더 빠른 First Contentful Paint — JS 로드 전에 콘텐츠가 보임 ✓ 더 나은 소셜 공유 — 링크 미리보기가 실제 메타 태그/콘텐츠를 봄 ✓ 느린 기기/네트워크에서 향상된 성능 ``` ## 하이드레이션 — 재렌더링 피하기 ```ts provideClientHydration() // 비파괴적 하이드레이션: 서버 HTML을 재사용, 재구축하지 않음 ``` 최신 Angular의 **비파괴적 하이드레이션**은 서버에서 렌더링된 DOM을 버리고 다시 렌더링하는 대신 재사용하여, 깜빡임을 피하고 성능을 개선합니다. ## 관련: SSG (사전 렌더링) ```text SSR → 요청마다 렌더링 (동적 콘텐츠, 항상 최신) SSG → 빌드 시점에 페이지를 사전 렌더링 (정적, 가장 빠름) — 거의 변하지 않는 콘텐츠에 좋음 ``` Angular는 가장 빠른 정적 콘텐츠 전달을 위해 빌드 시점에 라우트를 **사전 렌더링**(SSG)하는 것도 지원합니다. ## 주의 사항 ```text ⚠️ 서버에는 브라우저 API가 없음 (window, document, localStorage) — isPlatformBrowser로 보호 ⚠️ 더 많은 인프라 (실행/유지보수할 Node 서버) ``` ## 왜 중요한가 콘텐츠가 많은 사이트, 전자상거래, 또는 **SEO와 빠른 첫 페인트가 중요한** 모든 앱에서, 클라이언트 전용 Angular SPA는 부족합니다. 검색 엔진과 사용자는 JS가 실행될 때까지 빈 페이지를 받습니다. SSR(하이드레이션과 함께)은 실제 HTML을 미리 전달하여 이를 해결하고, SSG는 정적 콘텐츠에 대해 한 걸음 더 나아갑니다. SSR이 추가된 복잡성을 감수할 가치가 있는 때와 브라우저 API 주의 사항을 아는 것이 핵심적인 아키텍처 판단입니다.