서버 사이드 렌더링 이란
서버 측 렌더링
**SSR(Server-Side Rendering)**은 클라이언트에 전송하기 전에 서버에서 웹 페이지를 렌더링하는 기술로, 빠른 로딩과 SEO 최적화를 보장합니다.
작동 방식
- 서버가 브라우저로부터 요청 수신
- 완전한 HTML 페이지 생성
- 준비된 HTML을 클라이언트에 전송
- 브라우저가 콘텐츠를 즉시 표시
- JavaScript가 페이지를 "하이드레이션"하여 인터랙티브하게
장점
- 빠른 첫 콘텐츠풀 페인트 (FCP)
- 우수한 SEO 최적화
- JavaScript 없이 작동
- 소셜 미디어 메타데이터 개선
- 느린 기기에 적합
단점
- 서버 부하
- 인터랙티브까지의 시간 (TTI)
- 캐싱 복잡성
- 높은 인프라 비용
CSR과의 비교
- SSR: HTML이 서버에서 생성
- CSR: HTML이 브라우저에서 생성
- SSG: HTML이 빌드 시 생성
SSR 지원 프레임워크
- Next.js (React)
- Nuxt.js (Vue)
- SvelteKit (Svelte)
- Angular Universal
- Remix
사용 시기
- 콘텐츠 사이트 및 블로그
- 이커머스
- 뉴스 포털
- SEO 중요 웹사이트