🖊️

CSR vs SSR

SPA (Single Page Application)

하나의 HTML파일을 기반으로 자바스크립트를 이용해 동적으로 화면의 컨텐츠를 바꾸는 방식의 웹 어플리케이션

MPA (Multiple Page Application)

사용자가 페이지를 요청할 때마다, 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션

전통적인 방식을 이용한다면, SPA가 사용하는 렌더링 방식은 CSR이고, MPA가 사용하는 렌더링방식은 SSR이다.

CSR (Client Side Rendering)

notion image

CSR에서는 브라우저가 서버에 HTML과 JS 파일을 요청한 후 로드되면 사용자의 상호작용에 따라 JS를 이용해서 동적으로 렌더링 시킨다.

장점

첫로딩만 기다리면 , 동적으로 빠르게 렌더링 되기 때문에 사용자 경험이 좋다.

서버에게 요청하는 횟수가 적기 때문에 서버에 부담이 덜하다.

단점

모든 스크립트 파일이 로드 될때까지 기다려야한다.

리소스를 청크 단위로 묶어서 요청할 때만 다운받게 하는 방식으로 완화시킬 수 있지만 완벽히 해결할 수 없다.

검색엔진의 검색봇이 크롤링을 하는데 어려움을 겪기 때문에 , 검색엔진 최적화(Search Engine Optimization)의 문제가 있다.

구글 봇의 경우 JS를 지원하지만, 다른 검색엔진의 경우 그렇지 않기 때문에 문제가 된다.