Client Side Rendering (CSR)

CSR은 SPA(single page application)의 빌딩 방식입니다.

브라우저가 렌더링 되는 방식은 아마 JavaScript를 공부해보면 어떻게 진행되는지 알 수 있습니다.

"HTML로 DOM을, CSS로 CSSDOM을 가지고 최종 DOM tree를 구성하게 되고…."

그냥 간단하게,

JS의 모든 실행이 완료가 된 이후 (데이터 fetching, routing… ) 해당 브라우저의 화면을 띄울 수 있습니다.

Client Side Rendering은 말 그대로, 서버가 아닌 클라이언트 브라우저 상에서 로직 실행을 하는 것을 뜻합니다.

Web Page Rendering

FP (First Paint)

첫 픽셀이 그려지는 시점

FCP (First Contentful Paint)

페이지가 로딩을 시작해서 어떤 콘텐츠(텍스트, 이미지, svg, canvas, 등)가 화면에 보이기 시작한 시점

TTI (TIME TO INTERACTIVE)

페이지가 완전히 상호작용(interactive) 가능한 시점

첫 CSR에서의 렌더링은, JavaScript의 다운과 실행, 처리과정이 모두 완료가 되어야 렌더링이 되므로, 첫 페이지 로딩은 시간이 오래 걸립니다.
중요한 정보들이 수많은 API요청으로 가지고와서 뿌려줘야하는 거라면, SEO google crawler가 인덱싱해가기 전까지, 빠르게 렌더링을 시킬 수 없습니다.

첫 페이지 로드에 대한 성능 제한을 설정합니다. webpack에서도 해당 성능 제한을 걸어두면, 오류나 경고메세지를 받을 수 있는 기능이 있습니다.
Pre-loading

중요한 로직 (즉, 빨리 처리되어서 보여져야 하는 로직들)은 HTML의 안에다가 넣어서 HTML DOM이 생성되기 전에 처리가 될 수 있도록 구현합니다.

보통 body 마지막에 javascript를 연결해야하는 방식이 일반적입니다. 그 이유는 DOM이 생성되기도 전에 JS를 만나게 되면 DOM생성을 멈추고, JS처리를 먼저하기 때문입니다. 이 점을 이용한 방법이라고 보면 될 것 같습니다.
Lazy loading

보통 스크롤로 동적인 이미지를 처리할 때, 무한 스크롤 기능을 구현할 때 사용하는 방식입니다. 처음부터 모든 것을 불러오지 않고, 유저가 특정 동작(스크롤이 화면 마지막에 닿았을 때)를 감지하여 부분적으로 처리할 수 있도록 하는 방식으로, 초기 페이지 렌더링의 성능을 높힐 수 있습니다.
Code Splitting

Webpack에서 지원하는 기능 중에 하나며, 코드를 여러 번들로 분할하여 병렬적으로 처리할 수 있습니다.