SSR(Server Side Rendering)에 대해 설명해주세요.

답변 확인

SSR 방식

SSR(Server Side Rendering)은 초기 화면을 서버에서 렌더링하여 완성된 HTML을 클라이언트로 전달하는 방식입니다.

특징

• 초기 화면은 서버에서 렌더링됨
• 클라이언트는 전달받은 HTML을 파싱하여 화면 구성
• 필요 시 Hydration 과정을 통해 동적 기능 추가

장점

• SEO(검색 엔진 최적화) 유리: 완성된 HTML을 제공하여 검색 엔진 크롤링이 용이함
• 빠른 초기 로딩 속도: 초기 화면 렌더링이 빠르게 이루어짐

단점

• 상호작용 초기화 느림: TTV(Time to View)와 TTI(Time to Interactive) 사이에 격차 발생 가능
• 구현 난이도 높음: 서버와 클라이언트 간 복잡한 처리 필요
• 서버 비용 증가: 동적 HTML 생성으로 서버 리소스 소모 증가

CSR 방식

CSR(Client Side Rendering)은 클라이언트가 서버에서 뼈대 HTML을 받아온 후, 자바스크립트를 통해 화면을 동적으로 렌더링하는 방식입니다.

특징

• 브라우저가 비어 있는 HTML을 받아오고 자바스크립트로 콘텐츠를 렌더링 이후 모든 화면 전환 및 작업이 클라이언트에서 처리됨

장점

• 부드러운 사용자 경험: 페이지 전환 시 빠르고 자연스러운 동작 제공
• 서버 부하 감소: 정적인 파일 제공으로 서버 리소스 소모 감소
• 유연한 개발 환경: 복잡한 UI를 클라이언트에서 쉽게 구현 가능

단점

• SEO에 불리: 초기 HTML이 비어 있어 검색 엔진 크롤링 어려움
• 초기 로딩 속도 저하: 자바스크립트 다운로드 및 실행으로 초기 화면 로딩 시간 증가
• 클라이언트 성능 의존: 사용자 디바이스 성능에 따라 애플리케이션 성능이 영향을 받음

활용 사례

SSR

블로그, 커머스, 뉴스 사이트 등 SEO가 중요한 프로젝트

CSR

대화형 웹 애플리케이션, 싱글 페이지 애플리케이션(SPA)