CSR vs SSR

현채은·2024년 6월 17일
post-thumbnail

CSR (Client Side Rendering)

  • 클라이언트 측에서 렌더링 하는 방식
    - 브라우저에 표기하기 위한 모든 코드를 클라이언트 측에 모두 보낸 후, 클라이언트 쪽에서 코드를 실행하여 렌더링 하는 것
  1. 유저가 웹사이트에 방문하여, 브라우저가 서버에 컨텐츠를 요청한다.
  2. 서버는 빈 뼈대만 있는 HTML파일과 JavaScript파일을 다운로드한다.
  3. 브라우저가 연결된 JavaScript 링크를 통해 서버로부터 다시 JavaScript 파일을 다운로드한다.
  4. JavaScript를 통해 동적으로 페이지를 생성하여 브라우저에 렌더링한다.

장단점 ?

장점

  1. 서버 측의 부하가 적다
  • 서버는 빈 뼈대만 있는 HTML 파일을 넘겨주는 역할만 수행하면 되기 때문
  • 클라이언트 측에서 연산, 라우팅 등을 모두 직접 처리하기 대문에 반응속도가 빠르며 UX 또한 우수하다.
  1. 초기 로딩이 끝난 후 페이지를 일부 변경하는 경우에는 구동 속도가 빠르다.
  • 부분적으로 업데이트가 가능하다.

단점

  1. 초기 로딩 속도(TTV)가 느리다
  • 브라우저가 JavaScript파일을 다운로드 하고 동적으로 DOM을 생성하는 시간을 기다려야 하기 때문
  1. SEO에 불리하다
  • 웹 크롤러는 HTML을 읽어 검색 가능한 색인을 만들어 내는데, 빈 HTML파일에는 색인할 만한 콘텐츠가 존재하지 않는다.
  1. CDN에 캐시가 되지 않는다.

CDN이란 ?
지리적인 제약 없이 전 세계 사용자에게 빠르고 안전한 콘텐츠 전송을 하기 위해 고안된 기술
ex. 우리나라 사람이 미국에 있는 서버에 데이터를 요청하는 경우, 서버를 분산시켜 캐싱해 둔 후 사용자의 콘텐츠 요청이 들어오면 사용자와 가장 가까운 위치에 있는 서버로 매핑시켜 요청된 컨텐츠의 캐싱된 내용을 보내주는 방식으로 빠르게 데이터를 주고 받을 수 있다.

SSR(Server Side Rendering)

  • 서버 측에서 렌더링 하는 방식
    - 클라이언ㅌ의 요청이 들어오면 렌더링 실행
    - 미리 생성해 두는 것이 아닌 요청이 오면, 생성이 시작된다.
  1. 유저가 웹사이트에 방문하여, 브라우저가 서버에 컨텐츠를 요청한다.
  2. 서버는 페이지에 필요한 데이터를 즉시 모두 얻어와 삽입한 후 CSS까지 모두 적용하여 렌더링 준비를 마친 HTML과 JavaScript코드를 브라우저에게 응답으로 전달한다.
  3. 브라우저는 JavaScript 코드를 다운로드 하고, HTML에 JavaScript 로직을 연결한다.

장단점 ?

장점

  1. SEO에 유리하다.
  • 모든 데이터가 이미 HTML에 담긴 채로 브라우저에 전달되기 때문
  • 크롤러 봇이 HTML을 무리없이 읽을 수 있다.**
  1. CSR보다 초기 구동속도가 빠르다.
  • JavaScript 코드를 다운로드 받고, 실행하기 전에 사용자가 이미 HTML 렌더링 화면을 볼 수 있기 때문이다.
  • 하지만 JavaScript 코드가 다운로드 되기 전이기 때문에 실제 동작이 제대로 이루어지지 않을 수 있다. ( TTV와 TTI 사이의 간격이 존재한다.)

단점

  1. TTV(Time to View)와 TTI(Time to Interact) 간의 시간 간격이 존재한다.
  • JavaScript 코드가 다운로드 되기 전, HTML 뼈대를 사용자에게 먼저 보여주기 때문이다.
  1. 화면 깜빡임이 발생하고, 서버 과부하가 발생할 수 있다.
  • 서버 측에서 렌더링 준비를 마친 파일을 보내주기 때문

SSG (Static Site Generation)

  • 서버에서 HTML을 보내준다는 차원에서는, SSR과 유사하지만 언제 만들어주는지에 따라 차이점이 존재한다.
    - SSR은 요청을 받는 즉시 HTML 파일을 생성하여 응답하기 때문에 데이터가 자주 변경되어 미리 만들어 두기 어려운 페이지에 사용하기에 적합하다.
    • SSG는 페이지를 서버에 모두 만들어 둔 후, 요청시에 만들어 둔 페이지를 응답으로 보내주기 때문에 데이터가 자주 변경되지 않는 페이지에 사용하기에 적합하다.
    • CDN에 캐시가 가능하며 TTV가 빠르다는 장점이 있지만, 사용자 별 정보 제공이 어렵다는 단점이 있다.

ISR(Incremental Static Regeneration)

  • 빌드 시점에 페이지를 렌더링 한 후, 설정한 시간 마다 페이지를 새로 렌더링한다.
    - SSG와 동작 방식은 비슷하지만, 설정한 시간마다 페이지를 업데이트 한다는 차이점이 존재한다.
profile
현채은
개발 기록 공간
이전 포스트

SPA vs MPA

다음 포스트

AWS S3, CloudFront를 사용하여 배포하기

0개의 댓글