CSR (Client Side Rendering)
CSR은 웹 애플리케이션이 초기 로딩시 서버로부터 빈 html 파일을 받은 후 , 모든 렌더링 과정을 브라우저 내에서 js로 처리하는 방식입니다. CSR을 사용하는 형태에는 대표적으로 SPA가 있습니다.
- SPA (Single Page Application) : MPA와 달리 단일 페이지(하나의 HTML 페이지 내에서 작동)로 이루어져 있어서 갱신될 부분에 대해서만 데이터를 요청하여 렌더링하는 방식입니다.
단일 페이지란?
하나의 HTML 페이지 내부에서 모든 interaction과 페이지 전환이 새로운 페이지를 로드하지 않고 js로 변경되는 부분만 교체되는 것을 뜻합니다.
CSR 특징
장점
빈 HTML만을 전달받기 때문에 TTFB(Time To First Byte)가 빠릅니다.
화면 깜빡임이 없어 더 나은 UX를 제공할 수 있습니다.
초기 로딩 이후 구동 속도가 빠릅니다.
단점
브라우저가 웹 페이지의 정보를 렌더링해야 하기 때문에 FCP (First Contentful Paint)가 느립니다. (로딩해야 하는 리소스가 많아질 수록 더 느려질 수 있습니다. )
SEO가 어렵습니다.
TTFB : 사용자가 웹 페이지에 접속한 후 서버로부터 첫 번째 byte를 받는 데 걸리는 시간
FCP : 페이지가 로드되기 시작하고 컨텐츠의 일부가 화면에 렌더링 될 때까지의 시간
SSR (Server Side Rendering)
SSR은 서버에서 빈 HTML이 아닌 초기 콘텐츠가 포함된 즉시 렌더링이 가능한 HTML을 생성하여 브라우저에 반환하여 사용자가 즉각적으로 콘텐츠를 볼 수 있게 하는 방법입니다. 이후 클라이언트(browser)가 js를 다운로드 받고 이후에 사용자 조작이 가능해집니다.
SSR 방식을 사용하는 웹 페이지의 형태에는 대표적으로 MPA가 있습니다.
- MPA (Multi Page Application): 다중 페이지로 이루어져있어 웹에 변경 사항이 있을 때마다 서버로 페이지를 요청해서 새로 렌더링 하는 방식입니다. 즉 , MPA는 여러 개의 독립된 페이지를 가지고 각 페이지는 고유의 URL을 가지고 있어 사용자가 다른 페이지로 이동할 때 서버에 리소스 요청을 보내는 방식입니다.
SSR 특징
장점
초기 콘텐츠가 로딩된 페이지를 제공하기 때문에 FCP(First Contentful Paint)가 빠릅니다.
또한 SEO(Search Engine Optimization)에 유리합니다.
단점
TBT(Total Blocking Time)가 생길 수 있습니다. 위에서 설명한 바와 같이 즉시 렌더링이 가능한 HTML을 생성하여 초기 모습을 사용자는 바로 볼 수 있지만 , 이후 client 쪽에서 JS를 다운로드한 후 렌더링을 완료하기 전까지는 사용자가 어떤 조작도 할 수 없습니다.
페이지를 이동할 때마다 화면 깜빡임이 발생하여 UX가 저하될 수 있습니다.
페이지 이동시마다 매번 요청이 발생하기 때문에 서버 과부하가 발생할 수 있습니다.
TBT : FCP로부터 TTI(Time To Interact) 사이의 시간
TTI : 사용자가 페이지에서 상호 작용이 가능하기까지의 시간
SEO
검색 봇이 웹 사이트를 크롤링하면서 수집된 정보를 색인화하는 과정입니다.
CSR이 SEO에 유리하지 않은 이유
CSR 방식은 서버에서 빈 html 파일을 받은 후 웹 페이지의 콘텐츠가 브라우저에서 렌더링됩니다.
검색 엔진 크롤러는 대체로 HTML 콘텐츠를 읽어 웹 페이지의 내용을 이해한 후 색인을 만드는데 , CSR 방식은 검색 엔진이 페이지를 크롤링할 때 빈 HTML만 존재하기 때문에 크롤러가 내용을 이해하지 못할 가능성이 있습니다.
SSR이 SEO에 유리한 이유
CSR과 반대로 SSR은 초기 콘텐츠를 웹 브라우저에게 전달하기 때문에 크롤러가 html 콘텐츠를 이해할 수 있어 SEO에 유리합니다.
Hydration
동작 방식
- SSR 방식으로 콘텐츠가 포함된 html 파일을 읽어들입니다.
- 브라우저에서 html을 받아들인 후 js 번들이 로드됩니다. 로드된 js 번들은 html을 동적으로 활성화하고 상호 작용할 수 있는 기능을 추가합니다. (hydration)
- 페이지 이동과 같은 이벤트를 CSR 방식으로 처리합니다.(동적으로 활성화시키기 때문)
참고 자료 : https://www.youtube.com/watch?v=TXzwuaXQN2U
https://velog.io/@yrnana/웹사이트-성능-메트릭
