SSR vs CSR

서버사이드 렌더링 (SSR)

• 정의:
  화면을 렌더링(HTML 생성)을 서버에서 처리하고, 브라우저로 완성된 HTML을 전송하는 방식.
• 작동 원리:
  1. 클라이언트(브라우저)가 서버에 요청.
  2. 서버에서 필요한 데이터를 조회하고, HTML을 생성.
  3. 완성된 HTML을 클라이언트에 응답.
  4. 브라우저가 HTML을 그대로 렌더링.
• 사용 기술:
  • JSP, Thymeleaf, PHP, Ruby on Rails 등.
  • 최근에는 Next.js(React 기반 프레임워크)도 SSR 지원.
• 장점:
  • SEO(검색 엔진 최적화): 검색 엔진 크롤러가 HTML을 바로 읽을 수 있음.
  • 초기 로딩 속도가 빠름: 브라우저가 완성된 HTML을 바로 렌더링.
  • 적은 자바스크립트 의존성.
• 단점:
  • 사용자 인터랙션이 많은 경우 서버와의 왕복 요청이 많아짐.
  • 서버 부하 증가: 모든 렌더링 작업을 서버에서 처리.

---

클라이언트사이드 렌더링 (CSR)

• 정의:
  화면을 렌더링(HTML 생성)을 클라이언트(브라우저)에서 처리하고, 서버는 데이터(API)를 제공하는 방식.
• 작동 원리:
  1. 서버에서 HTML과 자바스크립트를 전송.
  2. 브라우저가 자바스크립트를 실행하여 화면 렌더링.
  3. 필요한 데이터는 API 요청을 통해 서버에서 받아옴.
  4. 화면 갱신은 클라이언트에서 처리.
• 사용 기술:
  • React, Angular, Vue.js 등.
• 장점:
  • 사용자 경험(UX): 페이지 전환 시 빠른 화면 갱신.
  • 서버 부하 감소: 렌더링 작업을 클라이언트가 담당.
  • 동적 화면 구성: 데이터만 받아와 화면을 즉시 갱신.
• 단점:
  • 초기 로딩 속도 느림: 브라우저가 자바스크립트를 다운로드 및 실행해야 화면 출력.
  • SEO에 불리: 검색 엔진이 자바스크립트를 실행하지 못하면 콘텐츠를 읽지 못함(SSR 없이 CSR만 사용할 경우).

---

SSR vs CSR의 주요 차이점

항목 서버사이드 렌더링 (SSR) 클라이언트사이드 렌더링 (CSR)

렌더링 위치	서버에서 HTML 생성	클라이언트(브라우저)에서 HTML 생성
초기 로딩 속도	빠름	느림 (자바스크립트 실행 시간 필요)
SEO	유리	불리 (별도 설정 필요, ex: React + Next.js)
사용 기술	JSP, Thymeleaf, PHP, Ruby on Rails	React, Angular, Vue.js 등
서버 부하	높음	낮음
데이터 갱신	새 요청마다 페이지 전체 갱신	필요한 데이터만 갱신

---

요약

• SSR은 SEO가 중요하거나, 초기 화면 로딩 속도가 중요한 경우 적합.
• CSR은 동적인 UI와 사용자 경험이 중요한 경우 적합.
• 현재는 두 방식을 결합한 하이브리드 렌더링(SSR + CSR, Next.js) 방식도 널리 사용되고 있음.