CSR, SSR 의 등장 배경

MPA

초창기의 웹은 텍스트 중심의 단순 문서에 불과했다. 데이터의 연결과 탐색이 필요하다면 하이퍼텍스트(하이퍼링크를 포함) 를 사용하였다.

이러한 초창기 웹은 MPA(Multiple Page Application) 으로 구현되어있다. MPA 는 다중 페이지로 이뤄져있어 변경사항이 있을 때마다 서버로 페이지를 요청한다.

하지만, 페이지를 요청하여 이동할 때마다 서버로부터 새로운 Html 을 받을 때 새로고침이 발생하는 문제가 있었다. 또한, 웹에서 보여주는 데이터에 단순한 텍스트 뿐아니라 사진, 영상, 유저 인터랙션과 같은 복잡한 요소들이 추가되어 성능 이슈가 발생하였다.

이러한 문제를 해결하기위해 등장한 기술이 AJAX 이다. AJAX 는 새로운 데이터가 필요할 때 새로운 페이지를 서버에 요청하는 것이아니라, 필요한 데이터만 리로드할 수 있도록 도와준다.

이러한 AJAX을 활용하여 웹을 구현하는 방식으로 SPA(Single Page Application) 가 등장했다. SPA는 단일 페이지로 이뤄져 있어 갱신될 부분에 대해서만 데이터를 요청한다.

이러한 방식은 MPA 의 문제점중 하나였던 새로고침이 발생하지 않아 사용자 경험에 좀더 유리하다는 점에서 이점이 있다.

렌더링이 클라이언트(브라우저)에서 발생하는 것을 의미한다.

초기 페이지 로드 이후, 속도가 빠르다. 초기 로딩 때 모든 번들을 다운 받고, 그 이후에는 필요한 데이터만 서버에 요청하면 되기 때문이다.
FCP(First Contentful Paint) 까지 오래 걸린다. js 를 서버로 부터 다운로드 받고, 동적으로 DOM 을 생성 할 때까지 의 시간을 사용자는 모두 기다려야 하기 때문이다.

최초 콘텐츠풀 페인트(FCP) 는 브라우저가 DOM에서 첫 번째 콘텐츠 비트를 렌더링하여, 페이지가 실제로 로드되고 있다는 첫 번째 피드백을 사용자에게 제공하는 경우입니다. FCP 이후에 사용자는 웹 페이지가 로드되어 있다는 것을 느낄 수 있습니다.
SEO(검색 엔진 최적화) 에 불리하다. 크롤러는 html 을 읽어 검색 가능한 색인을 만들어 내는 방식으로 작동하는데, CSR 의 html 은 텅 비어있는 상태이기 때문이다.

서버측에서 렌더링 될 페이지를 클라이언트로 보내주는 것을 의미한다.

초기 구동 속도가 빠르다. 정확히 말하면 FCP (First Contentful Paint)이 빠르다. 이유는, 서버가 초기 콘텐츠가 로딩된 상태인 html 을 응답하기 때문에, 사용자는 웹에 접속하고 얼마 지나지 않아 정적인 페이지를 먼저 확인할 수 있다.
SEO 에 유리하다. 모든 데이터가 이미 html 에 담겨진 채로 브라우저에 전달되기 때문이다.
사용자가 페이지를 보는 시점과, 사용할 수 있는 시점이 다르다. 다른 표현으로 TBT (Total Blocking Time) 이 발생한다고도 한다. 이는 초기 콘텐츠가 로딩된 html 을 사용자가 받아 보고, 이후 js 가 실행되어 인터랙티브한 페이지가 되기 전까지의 시간 이 발생하는 것을 의미한다. (FCP 에서 TTI(Time To Interactive) 까지의 시간)