본문 바로가기

프로젝트

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

클라이언트 사이드 렌더링(CSR, client-side rendering)


  • 서버에서 JSON 파일만 보내주고 html을 그리는 역할은 클라이언트가 담당, SPA에서 주로 사용
  • 사용자의 행동에 따라 필요한 부분만 다시 읽어들여 서버측 랜더링 보다 빠른 인터랙션을 기대할 수 있음(페이지를 이동하면 새로운 페이지 요청)
  • 초기 구동 속도가 느림
  • SEO 문제, CSR 되는 페이지를 빈 페이지로 인식
  • 보안문제, SSR에서는 사용자 정보를 세션으로 관리, 클라이언트 쪽에서는 쿠키 말고는 마땅한 저장공간이 없음

서버 사이드 렌더링(SSR, server-side rendering)


  • 전통적인 방식
  • 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식
  • 모든 데이터가 매핑된 서비스 페이지를 클라이언트(브라우저)에게 바로 보여줄 수 있음
  • 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR(client-side rendering)보다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라짐(첫 렌더링된 html을 사용자에게 전달해줘 초기구동속도가 빠름)
  • SEO(search engine optimization) 또한 쉽게 구성할 수 있음
  • 프런트엔드 영역과 백엔드 영역은 REST API를 통해 느슨하게 연결할 수 있다.

참고 링크

'프로젝트' 카테고리의 다른 글

[JS]웹팩(webpack)이란?  (0) 2021.07.01
[HTML]HTML란? 기본 내용 정리  (0) 2021.05.13
[JS] 프로젝트 시작  (0) 2021.05.13