CSR vs SSR vs SPA

React.js 와 함께 많이 사용되는 Next.js에 대해 공부하다보면 서버 사이드 렌더링(SSR)에 대한 언급을 자주 볼 수 있다. 이와 관련해 헷갈릴 수 있는 용어들을 차례로 정리하려고 한다.

---

SSR (Server Sid Rendering)

 서버사이드 렌더링은 전통적인 웹 어플리케이션의 동작 방식이다. 사용자가 웹페이지에 접근할 때, 서버에 각각의 페이지에 대한 요청을 보내 HTML,JS 등을 응답받아 완성된 HTML을 화면에 렌더링하는 방식이다.

장점

• 빠른 첫 페이지 렌더링이 가능하다.
• 검색 엔진 최적화(SEO)가 가능하다.

단점

• 사이트를 이동할 때, 매번 서버에 새로운 화면을 요청해야하기 때문에, 페이지 이동시 깜박거리는 현상이 발생한다.
• 서버에 요청하는 횟수 및 서버가 처리해야 할 작업량이 증가하기 때문에 서버의 부하가 커질 수 있다.

---

CSR (Client Side Rendering)

React, Vue 등과 같은 다양한 프론트엔드 프레임워크들이 유행함에 따라 보편화면 웹 어플리케이션의 동작 방식이다. 브라우저에서 전적으로 웹 페이지를 렌더링하는 방식으로, 아래 순서와 같이 동작한다.
 1. 브라우저가 Front-end 서버에 화면을 요청한다.
 2. Front-end 서버에서 브라우저로 HTML, JS등을 반환한다.
 3. 브라우저에서 넘겨받은 JS가 동작하면서 백엔드 서버에 데이터를 요청한다.
 4. Back-end 서버에서 브라우저로 데이터를 반환한다.
 5. 브라우저가 앞서 응답받은 HTML, JS등과 데이터를 바탕으로 화면을 렌더링한다.

장점

• 최초 로딩시 Front-end 서버로 부터 HTML과 Static파일을 받으면 그 즉시 렌더링을 시작하기 때문에 빠른 인터렉션이 가능하다. (페이지 이동시 깜박거리는 현상이 없다)
• 서버 요청을 분산할 수 있으며, 렌더링을 위한 CPU연산이 줄어들어 서버의 부담이 줄어든다.

단점

• SSR보다 초기 로딩 속도가 느리다.
• SEO 문제가 발생한다.
• 저사양 기기를 사용하는 사용자일수록 요청한 페이지가 느리게 보인다.
• 네트워크 인프라가 약한 나라에서 서비스할 경우, 요청한 페이지의 로딩 속도가 더욱 느려질 수 있다.

---

SPA(Single Page Application)

단일 페이지로 구성된 웹어플리케이션을 의미한다. 첫 로딩시 전체 페이지를 요청한 뒤, 필요한 데이터만 JSON형태로 받아 동적으로 화면을 바꿔가며 렌더링하는 방식으로 모든 화면이 첫 화면을 로딩할 때에 미리 준비되어 있어야하기에 로딩 시간이 오래 걸린다. 그러나 첫 화면 로딩 이후, 특정 부분만 데이터를 바인딩하면 되기 때문에 빠르게 화면을 구성할 수 있다. 대표적인 SPA라이브러리로 React.js, Vue.js, Augular2등이 있다.

장점

• 첫 화면 로딩 이후, 모든 HTML을 브라우저가 갖고 있다. 따라서, 화면 이동시 Back-end 서버에 필요한 데이터만 요청하면 되기 때문에 전통적인 웹 어플리케이션에 비해 화면을 구성하는 속도가 빠르다.

단점

• 처음 화면을 로딩할때, 모든 화면이 미리 준비되어 있어야하기 때문에 로딩에 시간이 걸린다.

여기서 주의 할 점은, 전통적인 웹페이지 방식이 SSR 방식을 사용한 것이고, SPA가 CSR 방식을 사용하는 것이다. SPA와 CSR는 같은 것이 아니다.