# [[Next.js SSR Implementation]]

## 📌 Brief 브요
Next.js SSR(Server-Side Rendering) 구현은 브라우저 요청 시 서버에서 콘텐츠와 데이터를 사전에 패칭(fetch)하여 완전한 형태의 HTML을 생성한 뒤 클라이언트에게 전달하는 렌더링 방식입니다 [1, 2]. 이는 기본적으로 클라이언트 사이드 렌더링(CSR)을 사용하는 React 애플리케이션이 검색 엔진 크롤링에 취약하고 초기 렌더링 속도가 느린 단점을 극복하기 위해 사용됩니다 [3-5]. Next.js SSR은 SEO를 극대화하고 Core Web Vitals의 핵심 지표인 LCP(Largest Contentful Paint)를 단축하는 등 현대 웹 아키텍처 성능 최적화에 중요한 역할을 합니다 [2, 6].

## 📖 Core Content
* **SSR 구현 방식 (getServerSideProps):** Next.js에서 SSR을 구현하는 가장 대표적인 방법은 `getServerSideProps` 비동기 함수를 사용하는 것입니다 [2, 6]. 이 함수 내에서 API 등을 통해 서버 측에서 필요한 데이터를 미리 불러온(fetch) 후, 페이지 컴포넌트의 `props`로 전달합니다 [6]. 이를 통해 자바스크립트 실행 대기 시간 없이 콘텐츠가 즉시 채워진 HTML 뼈대를 클라이언트에 전송할 수 있습니다 [2, 6].
* **SEO (검색 엔진 최적화) 효과:** 전통적인 React CSR 앱은 자바스크립트가 실행되기 전까지 빈 HTML 셸을 제공하므로, Googlebot과 같은 검색 엔진 크롤러가 콘텐츠나 메타데이터를 즉각적으로 인식하는 데 어려움이 있습니다 [3, 7]. Next.js SSR을 적용하면 검색 엔진 봇이 자바스크립트 실행 없이도 메타데이터, 구조화된 데이터, 실제 콘텐츠가 모두 포함된 완전한 HTML을 수신하게 되므로, 크롤링 및 인덱싱 효율이 최우수(Excellent) 등급으로 향상됩니다 [2, 8].
* **성능 최적화 및 Core Web Vitals:** Next.js SSR 도입은 프론트엔드 성능 최적화와 Core Web Vitals 달성에 크게 기여합니다. 클라이언트 측의 렌더링 지연을 제거함으로써 최대 1,000ms의 LCP(Largest Contentful Paint) 속도 향상을 기대할 수 있는 고급 최적화 전략입니다 [6, 9]. 다만, 데이터가 포함된 완전한 HTML이 사용자에게 처음 보여지는 FCP(First Contentful Paint)는 빠르지만, 서버에서 매 요청을 처리하므로 백엔드 서버 부하가 발생하고 TTFB(Time to First Byte)가 상대적으로 길어질 수 있다는 특징을 고려해야 합니다 [8, 10].
* **활용 맥락 (Use Cases):** 이 방식은 마케팅 페이지, 블로그, 전자상거래(E-commerce) 플랫폼 등 콘텐츠가 매우 빈번하게 업데이트되거나 사용자 세션과 무관하게 실시간 데이터 제공 및 SEO가 필수적인 페이지에 주로 권장됩니다 [1, 8, 11].

## 🔗 Knowledge Connections
- **Related Topics:** [[Server-Side Rendering (SSR)]], [[Client-Side Rendering (CSR)]], [[Largest Contentful Paint (LCP)]], [[Search Engine Optimization (SEO)]], [[Core Web Vitals]]
- **Projects/Contexts:** [[SEO for React Applications]], [[Core Web Vitals Optimization Guide]]
- **Contradictions/Notes:** 소스에 따르면 Next.js SSR은 초기 HTML 도달 속도와 SEO 측면에서 뛰어나지만, 정적 사이트 생성(SSG)이나 증분 정적 재생성(ISR) 방식(캐시 기반, TTFB 20-50ms 수준)에 비해 매 요청 시마다 서버 리소스를 소모하므로 상대적으로 서버 응답 시간(TTFB 200-800ms)이 느릴 수 있습니다 [10]. 따라서 콘텐츠 변경 빈도와 성능 요구사항에 맞춰 SSR, SSG, ISR을 선택적으로 도입해야 합니다 [1].

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