CSR과 SSR에 대해 정리하기 전에 SPA와 MPA에 대해 정리가 필요하다.
SPA와 MAP
SPA (Single Page Aplication)
하나의 페이지로 구성된 웹 어플리케이션이다. 헤더가 고정된 웹사이트에서 메뉴를 클릭하면 메뉴에 관련된 웹페이지의 내용만 변화하는 사이트가 있는데 이렇게 필요한 부분만 변경되는 사이트가 SPA다. (ex. 오늘의 집)
MAP (Multi Page Application)
여러 개의 페이지로 구성된 웹 어플리케이션이다. 메뉴를 선택할 때마다 해당하는 메뉴의 html을 다시 로드해서 전체 페이지를 다시 렌더링하는 전통적인 방식이다. 메뉴를 이동할 때 화면이 깜빡이는 현상이 있다.
SPA, MPA와 CSR과 SSR의 관계
SPA와 MAP를 먼저 정리가 필요했던 이유는 CSR과 SSR이 SPA와 MAP와 밀접한 연관이 있기 때문이다. 렌더링 방식으로 SPA는 CSR을, MAP는 SSR을 주로 사용하게 된다.
SPA는 렌더링이 필요한 부분만 데이터를 전달받아서 클라이언트에서 페이지를 갱신하기 때문에 CSR을 사용한다.
MAP는 페이지를 옮길 때마다 서버에서 페이지에 필요한 정적 리소스 전체를 받아오기 때문에 SSR을 사용한다.
하지만 SPA===CSR, MPA===SSR은 아니다. 페이지가 몇 개인지, 렌더링을 어디서 하는지에 따라서 달라질 수 있다.
CSR과 SSR
CSR
서버에서 인덱스라는 텅텅 빈 HTML 파일을 클라이언트에 보내주고, 다시 js 파일을 보내준다. 해당 js 파일에는 어플리케이션 구동에 필요한 소스코드가 포함되어 있다. 서버로부터 필요한 데이터를 모두 전달받으면 사이트 구동이 시작된다.
사이트 접속 -> 텅텅 빈 html 파일 받기 -> 빈 화면 출력 -> html에 링크되어 있는 js 파일 받기 -> 웹 사이트 구동
TTV(Time to View) 와 TTI(Time to Interact)간의 공백이 없기 때문에 사이트의 컨텐츠가 보이자마자 사용자가 사이트와 자유롭게 인터랙션 할 수 있다.
따라서 사용자가 첫 화면을 볼 때까지 화면이 오래 걸릴 수 있고 SEO(Search Engine Optimization)가 어렵다는 단점이 있다. 빈 html 파일을 보내주기 때문이다.
SSR
웹사이트에 접속하면 필요한 html을 가져오고, 그 후 동적 작동에 필요한 js를 가져와 브라우저를 구동하게 된다. CSR에 비해 첫 페이지 로딩이 빠르고 SEO(Search Engine Optimization)가 좋다.
사이트 접속 -> 잘 만들어진 html 받기 -> 웹 사이트 출력 -> js 받기 -> 웹 사이트 구동
잘 만들어진 html을 받아 사용자에게 화면을 먼저 보여줄 수 있지만 js 파일을 받기 전이라 인터랙션까지 가능해질 때까지 기다려야 한다. 즉 TTV(Time to View)와 TTI(Time to Interact) 간의 공백 시간이 발생한다.
정적 사이트에서 발생하고 있는 화면 깜빡임 현상이 여전히 존재하고, 사용자가 많을 수록 서버에 과부화가 걸리기 쉬우며 html을 다운로드는 받았지만 사용자와 상호작용할 수 있는 js 파일을 아직 다운로드 받지 못해 사이트의 컨텐츠를 클릭해도 반응이 없을 수 있다는 단점이 있다.
SPA 프레임워크에서 SSR 사용하기
NextJs, Gatsby, Universal, Nuxt 등을 이용해서 React, Angluar, View와 같은 SPA 프레임워크에서도 SSR를 사용할 수 있다.
무엇을 써야할까?
사용자와의 상호작용이 많고, 검색 엔진에 노출될 필요성이 크지 않다면 CSR을 사용하고, 누구에게나 항상 같은 내용을 노출하고 검색 엔진에 노출될 필요가 있는 상품이나 회사 소개 홈페이지는 SSR이 적합하다.
CSR과 SSR이 둘 다 필요한 경우에는 NextJs, Gatsby, Universal, Nuxt와 같은 프레임워크를 활용하여 CSR과 SSR을 혼합 사용할 수 있다.
참고자료
https://www.youtube.com/watch?v=YuqB8D6eCKE
https://www.youtube.com/watch?v=iZ9csAfU5Os
