Angular 21에서 도입된 점진적 하이드레이션(Incremental Hydration)은 SSR 성능의 게임 체인저입니다. 이 가이드에서는 SSR 설정부터 SEO 최적화, 프로덕션 배포까지 전 과정을 다룹니다.
SSR이 중요한 이유
검색 엔진 크롤러는 JavaScript를 실행하지 못하는 경우가 많습니다. SSR은 서버에서 완성된 HTML을 제공하여 SEO를 극대화합니다. Angular 21의 새로운 SSR 엔진은 이전 버전 대비 40% 빠른 렌더링을 제공합니다.
점진적 하이드레이션 전략
모든 컴포넌트를 한번에 하이드레이션하는 대신, 뷰포트에 보이는 컴포넌트만 우선 하이드레이션하여 TTI(Time to Interactive)를 대폭 개선할 수 있습니다.
핵심 설정
// app.config.ts
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes),
provideHttpClient(withFetch()),
provideClientHydration(withEventReplay()),
],
};SEO 서비스 구현
메타 태그, Open Graph, 구조화된 데이터(JSON-LD)까지 한 번에 관리하는 SEO 서비스를 구현합니다.
배포 전략
Docker 멀티 스테이지 빌드를 활용하여 최적화된 SSR 이미지를 생성하고, Nginx 리버스 프록시를 통해 안정적으로 서비스합니다.