SSR/CSR 혼합 렌더링 전략 Skill

이 스킬은 에이전트가 SSR(서버 렌더) · CSR(클라이언트 렌더) · SSG(빌드 타임 프리렌더)를 한 애플리케이션 안에서 우아하게 혼합하도록 설계·구현할 때 쓰는 가이드라인입니다.

원리는 특정 프레임워크에 종속되지 않으며(메타프레임워크 공통), 구체적인 예제와 기술 대안은 Angular 22로 듭니다. 다른 환경(Next.js·Nuxt 등)으로 옮길 때 무엇을 같은 자리에 끼우면 되는지는 각 자리에서 짚습니다.

언제 쓰나

페이지마다 SEO·개인화·데이터 신선도 요구가 달라 렌더링 방식을 섞어야 할 때 쓴다. SSR을 켰는데 HTML이 빈 껍데기로 나올 때, 하이드레이션 후 같은 API를 또 호출할 때, 서버에서 window/localStorage가 없어 터질 때, 모달·뒤로가기 같은 클라 인터랙션이 SSR과 충돌할까 봐 걱정될 때, 백엔드 호출의 CORS·인증을 서버/클라 양쪽에서 일관되게 다루고 싶을 때 맞는다.

핵심 철학 및 개념