클라이언트 사이드 렌더링(CSR)
리액트, 뷰, 앵글러 사용에 따른 SPA 인기와 CPU 성능 상승으로 시작되었다. 클라이언트(브라우저) 측에서 자바스크립트 파일을 통해서 콘텐츠를 렌더링 하는 방식이다.
즉, HTML 문서가 아니라 JavaScript로 콘텐츠를 렌더링한다.
가장 대표적인 예시로, React를 사용하면 index.html 파일에는 id='root'만 담겨져 있고 텅텅 비어있다. 처음에는 빈 화면에 연결된 자바스크립트 파일(어플리케이션 로직, 라이브러리 소스 코드 모두 포함)을 다운받는 방식이다.
장점)
1. 깜빡임 없는 SPA 구현이 가능하다
단점)
1. 첫 화면을 보기까지 오래 걸린다.
2. HTML 문서를 분석해 검색에 도움을 줄 수 없어, SEO에 좋지 않다.
서버 사이드 렌더링(SSR)
SSR은 웹 사이트에 접속하면 서버에 필요한 데이터를 모두 가져와 HTML 파일을 만들어 보여주고 동적으로 제어하는 소스코드(JS)가 함께 클라이언트에게 제공한다. 즉, 클라이언트는 HTML 문서부터 우선적으로 보게 된다.
장점)
1. 페이지 로딩이 비교적 CSR보다 빠르다
2. SEO 성능을 개선할 수 있다.
단점)
1. 페이지 깜빡임 문제 (나쁜 UX)
2. 서버 과부하
3. TTV(Time To View)와 TTI(Time To Interact)간의 공백
=> HTML로 먼저 UI를 보고 난 후에 JS 파일이 불러져 오기 떄문에, 어떤 버튼을 누르는 등 동적인 제어를 하려고 할 때 순간적으로 이벤트가 동작할지 않을 수 있다.
📌추가 정보
Static Site Genration(SSG)
React + Gatsby
미리 정적으로 페이지를 생성해서 서버에 배포해두고, 필요에따라 추가적으로 데이터를 요청하거나 동적 기능이 필요하면 자바스크립트 파일로 동적 요소도 추가 가능
NEXT.js를 사용한 SSR
NEXT.js는 원래 강력한 SSR 지원하는 라이브러리였지만, 최근에는 SSR과 CSR을 적절히 섞어 사용할 수 있도록 해준다.
