[React] 페이지를 누가 렌더 하는가? (CSR vs. SSR)

1. CSR (Client Side Rendering)

2. SSR (Server Side Rendering)

---

React를 공부하다가 CSR과 SSR이라는 용어를 접하게 되었다. CSR은 Client Side Rendering의 약자이고, SSR은 Server Side Rendering의 약자라는 것에서 눈치를 챘겠지만, 둘의 차이는 페이지의 렌더를 누가 하느냐에 있다.

 

1. CSR (Client Side Rendering)

[그림 1] CSR 페이지 렌더 과정

CSR은 아래와 같은 과정을 거쳐 페이지를 렌더링한다.

1. 서버에서 브라우저에게 response 한다.
2. 브라우저는 JS를 다운받는다.
3. React를 실행시킨다.
4. 페이지가 나오면서 동시에 interact (ex. 클릭)를 할 수 있다.

 

2. SSR (Server Side Rendering)

[그림 2] SSR 페이지 렌더 과정

SSR은 아래와 같은 과정을 거쳐 페이지를 렌더링한다.

1. 서버는 미리 넣어둔 HTML 파일을 렌더링 할 준비가 되었다고 response 한다.
2. 브라우저가 HTML 페이지를 렌더링해서 화면에 보여준다. (이때부터 사용자들이 볼 수 있다.)
3. 그 이후 JS 번들을 다운받고, React를 실행시킨다.
4. React가 실행된 이후에 Interact가 가능하다.

 

CSR과 SSR은 모두 JS를 다운로드 받고, virtual DOM을 생성하고, event binding 이후 Browser DOM으로 옮기는 과정을 거친다.

 

SSR의 장점은 CSR보다 먼저 사용자에게 페이지를 보여줄 수 있다는 것이다. CSR은 처음에 페이지에 들어갔을 때 React를 실행시키고 JS를 DOM으로 변환해서 보여주기까지 사용자는 빈 페이지 혹은 로딩 페이지를 보고 있어야 한다. 차라리 페이지의 일부라도 보는 것이 UX의 측면에서 더 좋다고 느낄 수 있다.

 

하지만 SSR은 미리 준비해 둔 화면을 보여주고, 브라우저가 React 실행을 마칠 동안 event binding이 되어 있지 않기 때문에 클릭을 하더라도 React의 실행이 끝날 때까지 응답이 없다는 단점이 있다.

 

SSR은 CSR에 비해 TTFB(Time To First Byte)가 대부분 더 느리다. CSR은 서버에서 그냥 빈 페이지를 보내고, SSR은 사용자가 볼 만한 HTML 코드를 추가해서 보내기 때문에 시간 차이가 존재한다. 같은 이유로, 서버에서 첫 response를 하는 페이지들의 Size는 항상 CSR보다 SSR이 더 크다. 서버에서 처리하는 파일의 Size가 커질수록 사용자가 많아졌을 때 서버에 부담이 커지는 단점이 있을 수 있다.

 

또한, CSR의 throughput(출력량)이 SSR의 출력량보다 훨씬 많다. 이는 CSR이 SSR보다 처리량이 더 많다는 뜻이다.