서버 사이드 랜더링(SSR)과 클라이언트 사이드 랜더링(CSR)이란?

안녕하세요, 수염난아이티 입니다.

이번 페이지에서는 서버 사이드 랜더링(Server-Side Rendering)과 클라이언트 사이드 랜더링(Client-Side Rendering)에 대해서 알아보겠습니다.

 

목차

1. 서버 사이드 랜더링 이란?

2. 클라이언트 사이드 랜더링 이란?

3. 서버 사이드 랜더링 특징

4. 클라이언트 사이드 랜더링 특징

5. 서버 사이드 랜더링과 클라이언트 사이드 랜더링 비교

 

1. "서버 사이드 랜더링"이란?

서버 사이드 랜더링(Server-Side Rendering)은 웹페이지의 HTML을 서버에서 미리 랜더링하여 클라이언트(브라우저)에 전달하는 방식입니다.

 

2. "클라이언트 사이드 랜더링"이란?

클라이언트 사이드 랜더링(Client Side Rendering)은 웹페이지의 기본 HTML을 먼저 로드한 후, 브라우저에서 Javascript를 실행해 동적으로 콘텐츠를 랜더링 하는 방식입니다.

 

3. 서버 사이드 랜더링 특징

• 빠른 초기 로딩 : 완성된 HTML을 받아 바로 화면에 표시할 수 있음
• SEO 친화적 : 검색 엔진이 완전한 페이지를 쉽게 크롤링할 수 있음
  • SEO : Search Engine Optimization 검색 엔진 최적화
• 서버 부담 증가 : 모든 요청에 대해 서버가 페이지를 랜더링 해야함
• 페이지 간 전환 속도 느림 : 새 페이지 로드 시마다 서버 요청이 필요함

4. 클라이언트 사이드 랜더링 특징

• 초기 로딩 속도 느림 : 브라우저가 Javascript를 실행해야 페이지가 보임
• 빠른 페이지 전환 : 한 번 로드된 데이터로 동적 UI 업데이트 가능
• SEO 불리 : 기본 HTML이 비어있어 검색 엔진 크롤링이 어려움 (하지만 Next.js 등의 기술로 보완 가능)
• 서버 부담 감소 : 대부분의 랜더링이 클라이언트에서 이루어짐

 

5. 서버 사이드 랜더링과 클라이언트 사이드 랜더링 비교

구분	서버 사이드 랜더링 SSR	클라이언트 사이드 랜더링 CSR
초기 로딩 속도	빠름	느림
페이지 이동 속도	느림	빠름
SEO	유리함	불리함
보안성	높음	낮음
사용자 경험	낮음	높음
서버 부하	높음	낮음
개발 난이도	낮음 (일반적인 웹 개발)	높음 (복잡한 SPA 구조)
캐싱	불가능	가능

 

읽어주셔서 감사합니다.