SSR vs CSR

오늘 스터디를 같이 하는 프런트엔드 개발자 후배님께서 SSR vs CSR에 대해서 설명해줬다. 설명을 듣고 정리한 내용이다.

CSR, SSR, SSG, ISG 우리는 어떤 것을 사용해야할까? 🧐

CSR(Client Server Rendering) 방식

1. html + static 파일들을 내려받는다
2. javascript 같은 동적 파일들을 내려받는다.
3. 그 다음 서버에 필요한 파일들을 요청한다.

• SPA(Single Page Application)

  • 부분적으로 필요한 곳만 업데이트한 후 필요한 정보가 있을 때만 서버로 데이터를 요청하여 자바스크립트를 처리 후 페이지를 렌더링 한다.

• 장점

  • 첫 로딩에 정적 파일들만 다운받으면 동적으로 빠르게 렌더링 가능
  • 서버에 요청하는 횟수가 적다.

• 단점

  • 모든 정적 파일들이 로드될 떄 까지 기다려야한다.
  • SEO 검색 최적화 문제
    • 우선적으로 텅 빈 HTML을 만나게 되어 어떤 페이지인지 알 수 없다.
    • 구글에서는 JS까지 크롤링

• 정리

  • 브라우저 접속 시 요청을 한 후 서버는 정적 파일을 먼저 보낸다. html 파싱과 js파일을 요청한 후에야 유저는 페이지를 확인할 수 있다.

SSR(Server Side Rendering) 방식

1. 완전하게 만들어진 HTML 파일을 받아온 후 일부JS파일과 렌더링
2. 웹 서버에 요청할 떄 마다 브라우저에서 새로고침이 일어나고 서버에 새로운 페이지를 요청

• 장점

  • 초기 로딩 속도가 빠름
  • SEO 검색엔진 최적화 가능

• 단점

  • 매번 페이지를 요청하여 서버부하
  • Blinking Issue
  • interacting 반응이 안일어날 수 있다.

그럼 둘 중 어떤 것을 써야할까?

CSR는 해당 페이지가 보일때 까지 걸리는 시간(TTV)이 있고, SSR은 동적인 활동을 시작할 수 있을 때 까지 걸리는 시간이 있어 둘다 단점이 있다. 전자는 JS파일을 얼마나 효율적으로 보낼 수 있는지, 후자는 UI/UX의 개선을 신경써야 한다.

SSG(Static Site Generation) 방식

1. 모든 페이지가 정적으로 생성
2. 바로 동적파일 로딩
3. 빌드시에만 API 호출, 호출 제한을 둘 수 있다.

• 단점
  • 콘텐츠가 업데이트 되려면 페이지를 다시 빌드해야한다
  • 웹사이트가 크다면 빌드 시간이 매우 길 수 있다.
  • 지속적인 업데이트가 있는 경우 사용 지양

Gatsby

• React로 만든 웹 어플리케이션을 정적으로 페이지를 미리 생성해놓고 서버에 배포할 수 있다.
• 미리 생성해놓은 페이지가 전부 정적인 페이지가 아니라 JS 파일도 가지고 있어 동적으로 처리 가능하다.

Next JS

• SSR만 지원하는 라이브러리였지만 SSG도 지원
• CSR + SSR 적당히 섞임(ISR)

ISG(Incremental Static Generation) 방식

Next.js v9.5에서는 SSR과 SSG 두가지 하이브리드 버전인 ISR이라는 새로운 전략이 탄생
ISR은 빌드되는 동안 정적 페이지를 재생성할 수 있다.

1. 정적 페이지가 바로 로딩 (SSR과의 차이)
2. 동적파일 로딩
3. 업데이트가 발생하면 코드스플릿팅을 통해 부분적으로 업데이트

코드스플릿팅 | SPA는 한 파일로 결합되어 있다. 예를 들어 하나의 페이지를 보고 싶지만 페이지를 로딩하면서 다른 페이지들 정보 또한 다운로드 하게 된다. 이 부분을 유동적으로 해결해 주는 것.

Reference

• @LeeChaeng 채영
• CSR, SSR
• 웹의 변천사
• ISG
• Next.JS