# [[Server-Side Rendering (SSR)]]

## 📌 Brief Summary
서버 사이드 렌더링(SSR)은 사용자가 페이지를 요청할 때마다 서버에서 코드를 실행하여 완전한 HTML을 생성한 뒤 브라우저로 전송하는 웹사이트 렌더링 방식입니다 [1, 2]. 브라우저가 자바스크립트를 실행하기 전에 콘텐츠가 포함된 HTML이 즉시 도달하므로 초기 로딩 속도와 검색 엔진 최적화(SEO)에 매우 유리합니다 [3-5]. 주로 제품 목록, 뉴스 피드와 같이 실시간으로 자주 변경되거나 동적인 콘텐츠를 다루는 마케팅 사이트 및 전자상거래 플랫폼에 적합합니다 [1, 2, 6].

## 📖 Core Content
- **동작 방식 및 특징:** 사용자가 웹 페이지를 요청하면 서버는 필요한 API 데이터를 가져오고 코드를 실행하여 렌더링된 완전한 HTML을 반환합니다 [2, 5]. 브라우저가 이를 화면에 표시한 후, 자바스크립트 번들이 다운로드되고 '하이드레이션(Hydration)' 과정을 거쳐 페이지가 비로소 상호작용 가능한 상태가 됩니다 [2, 5].
- **SEO 및 검색 엔진 크롤링 향상:** SSR은 자바스크립트 실행 없이도 메타데이터, 구조화된 데이터 및 본문 콘텐츠가 포함된 완성된 HTML을 제공합니다 [4]. 이로 인해 Googlebot과 같은 검색 엔진이 콘텐츠를 발견하기 위해 자바스크립트 실행을 기다릴 필요 없이 즉시 크롤링하고 색인화할 수 있어 SEO 성능을 극대화합니다 [4, 6, 7].
- **성능적 이점:** FCP(First Contentful Paint) 속도를 높여 사용자가 의미 있는 콘텐츠를 즉각적으로 볼 수 있게 해주며, 저사양 클라이언트 기기 대신 서버에서 렌더링을 처리하여 체감 성능을 향상시킵니다 [2, 5, 8].
- **단점 및 한계:** 매 요청마다 서버 측에서 렌더링 과정을 거쳐야 하므로 서버 부하(Server load)가 증가하며 애플리케이션의 구조적 복잡성이 높아질 수 있습니다 [2, 5]. 또한, 화면에 콘텐츠가 빠르게 표시되더라도 자바스크립트 번들이 로드되어 하이드레이션이 완료될 때까지는 사용자가 상호작용할 수 없는 지연 시간이 발생할 수 있습니다 [5].
- **최적화 및 보안 모범 사례:**
  - 성능 최적화를 위해 서버 렌더링 페이지나 데이터를 캐싱하고, 서버 구성 및 API 호출을 최적화하며, React 18+의 스트리밍 SSR이나 점진적 하이드레이션(Progressive Hydration)을 적용하여 핵심 요소의 로딩 속도를 앞당기는 것이 권장됩니다 [9, 10].
  - 보안 측면에서는 동적 콘텐츠 렌더링 시 발생할 수 있는 데이터 주입(XSS, SQL 인젝션), 서버 측 요청 위조(SSRF) 및 민감한 API 노출의 위험을 방지하기 위해 모든 입력과 출력 데이터를 엄격하게 검증(Sanitize)하고 인증을 구현해야 합니다 [11, 12].

## 🔗 Knowledge Connections
- **Related Topics:** [[Client-Side Rendering (CSR)]], [[Static Site Generation (SSG)]], [[Core Web Vitals]], [[First Contentful Paint (FCP)]], [[Search Engine Optimization (SEO)]]
- **Projects/Contexts:** [[Next.js SSR Implementation]], [[React SEO Optimization]]
- **Contradictions/Notes:** 소스에 따르면 SSR은 FCP를 크게 개선하여 시각적 로딩 속도는 빠르지만, 자바스크립트 하이드레이션 지연으로 인해 INP(Interaction to Next Paint)와 같은 상호작용 성능 측정 지표에는 부정적인 영향을 줄 수 있으므로 Partial Hydration 등의 추가적인 렌더링 최적화 전략이 필요하다고 강조합니다 [5, 9, 10].

---
*Last updated: 2026-04-26*