SSR VS CSR

agatha·2021년 4월 13일
0

Frontend

목록 보기
1/1

SSR (Server Side Rendering)

  • SPA가 대두되기 전 주로 사용

  1. 브라우저 요청시 서버에서 데이터 fetch 한다.
  2. 프론트 서버에서는 fetch된 데이터와 함께 html + css 된 결과물을 브라우저에 넘겨준다.
  3. 브라우저는 결과물을 그린다.
  • 새로운 페이지를 넘어가더라도 그에 해당하는 html 파일을 만들기 위해 위 작업 반복
  • 장점: 전체가 한 번에 보인다.
  • 단점: 로딩 속도가 길다. late interaction.

CSR (Client Side Rendering)

  • React, Angular, Vue

  1. 브라우저 요청 ①

    1-1. 데이터를 포함하지 않은 js, html, css, img 등을 프론트 서버에서 처리

    1-2. 화면은 그려주는데 데이터가 없으므로 로딩창을 먼저 보여줌

  2. 브라우저 요청 ②

    2-1. 백엔드에 데이터를 요청하면 바로 브라우저로 돌려줌

  3. 로딩창을 없애고 데이터를 보여줌

  • 화면은 최초 한 번 받아오고, 데이터만 바꾼다.
  • 장점: 로딩 속도가 짧다. fast interaction.
  • 단점: 처음엔 모든 데이터를 받아오므로 초기 구동 속도 느리다. 검색 엔진 최적화 문제 (로딩창밖에 없다고 생각하여 검색 순위가 밀릴 수 있음)

SSR + code splitting

  • 검색 엔진일 때만 전통적인 SSR 방식 사용
  • 일반 유저일 때는 CSR 사용



References: 웹 렌더링

0개의 댓글