CSR과 SSR
SPA와 MPA를 먼저 알고가자면
SPA(Single Page Application)
단일 웹 페이지로 돌아가는 애플리케이션 즉, 클라이언트 측에서 한 장의 페이지로 작동하는 기능 정도로 소개할 수 있다.
웹 어플리케이션에 필요한 정적 리소스(html, css, javascript)를 한 번에 모두 다운로드 하고, 그 이후에 모든 일들을 클라이언트 측에서 브라우저가 비동기로 처리하게 된다. 예를 들어, 유저가 어떤 버튼을 클릭하였을 때, 원격 API를 호출해서 데이터를 가져온 후 HTML 문서로 렌더링 하는 일련의 과정이 모두 자바스크립트를 통해 브라우저에서 일어난다.
CSR 렌더링 방식이라고도 부르며 react, vue, angular 등이 사용된다.
MPA(Multiple Page Application)
새로운 페이지가 전환될 때마다 정적 리소스가 다운로드된다. 즉, 서버에서 매번 html을 다운로드 받게 되고 클라이언트 측에서는 다시 렌더링을 하게 된다.
⇒ 즉, 웹 어플리케이션이 여러 개의 페이지로 되어있느냐, 한 장의 페이지로 되어있느냐의 차이이다.
CSR과 SSR에 대해서 알아보자면
CSR
서버의 역할
빈 뼈대가 담긴 HTML과 연결된 JS 링크만을 요청 해주기 때문에 서버의 부하가 적다.
클라이언트의 역할
브라우저에서 JS를 다운로드 받고, 동적인 DOM을 생성 등을 모두 처리하기에 초기 로딩속도가 느리다.
결론적으로, 초기 로딩속도는 느리지만 서버의 부담이 적고 더 빠른 동적인 페이지를 만든다.
또, 크롤러 봇은 초기 빈 HTML 값을 해석하기 때문에 SEO에 불리하다.
SSR
동작방식
서버의 역할
CSS와 결합하여 렌더링 준비를 마친 HTML을 준비해서 요청한다. 서버에서 반조립형태로 클라이언트에게 요청하기 때문에 서버의 부하가 많고 느리다.
클라이언트의 역할
반조립 형태로 서버로부터 응답받기 때문에 빠르게 HTML을 렌더링하고, 이때 JS 코드를 다운로드하고 HTML과 연결만을 처리하기 때문에, 초기 로딩속도가 빠르다.
CSR의 단점을 보완하는 방법
초기 로딩속도가 느린것이 단점
1. 자바스크립트 번들 크기를 줄여 초기 로딩속도를 줄인다.
2. code-splitting
3. tree-shaking
4. chunk 분리
클라이언트 측에서 빈 HTML 값을 노출하기 때문에 SEO에 불리한 것이 단점
1. Next와 같은 라이브러리 또는 웹 팩 플러그인 등의 pre-rendering 방식을 통해서 개선한다.
2. HTML 파일을 미리 생성해서 크롤러 요청에 필요한 페이지들을 pre-rendering 한다.
[참고]