우선 제목과 같이 간단하게 CSR과 SSR에 대한 개념을 먼저 살펴보자.
1. CSR, SSR이란?
1-1. CSR
CSR의 동작과정을 살펴보자면 다음과 같다.
1. 유저가 웹 사이트에 방문하면, 브라우저가 서버에 콘텐츠를 요청한다.
2. 이에 서버는 빈 뼈대만 있는 HTML을 응답으로 보내준다.
3. 브라우저가 연결된 JS 링크를 통해 서버로부터 다시 JS 파일을 다운로드한다.
4. JS를 통해 동적으로 페이지를 만들어 브라우저에 띄운다.
1-2. SSR
SSR의 동작과정을 살펴보자면 다음과 같다.
1. 유저가 웹 사이트에 방문하면, 브라우저가 서버에 콘텐츠를 요청한다.
2. 이에 서버는 페이지에 필요한 데이터를 즉시 얻어와 모두 삽입하고, CSS까지 적용하여 렌더링 준비를 마친 HTML과 JS 코드를 브라우저에 응답으로 전달한다.
3. 브라우저는 JS 코드를 다운로드하고 HTML에 JS 로직을 연결한다.
2.SPA와 MPA
위에선 본 글의 주제인 CSR과 SSR의 동작원리에 대해 간단하게 살펴보았다. 그러나 더 깊게 CSR과 SSR에 대해 설명하기 위해서는 SPA와 MPA의 차이점을 알아야 한다.
2-1. SPA
SPA(Single Page Application)은 하나의 페이지로 구성된 웹 어플리케이션을 말한다.
2-2. MPA
MPA(Multi Page Application)은 이동할 때마다 서버로부터 새로운 HTML을 받아와 페이지 전체를 렌더링하는 웹 페이지 구성 방법이다.
3. CSR, SSR 깊이 들어가기
- SPA에서는 CSR로 렌더링하고, MPA에서는 SSR로 렌더링 한다.
- SPA는 필요한 정적 리소스를 한 번에 모두 다운로드하고, 이후 새로운 페이지 요청이 왔을 떄 필요한 데이터만 전달받아 클라이언트에서 필요한 페이지를 갱신하기 때문에 CSR로 렌더링한다.
- MAP는 새로운 요청이 있을 때마다 이미 렌더링 된 정적 리소스를 받아오기 때문에 SSR로 렌더링한다.
3-1. CSR과 SSR의 차이점
CSR(Client Server Rendering)는 클라이언트 측에서 렌더링하는 방식이고, SSR은 Server Side Rendering의 약자로, 서버 측에서 렌더링하는 방식이다.
즉 어디에서 렌더링을 준비하냐의 차이가 있다.
3-2. SSR과 SSG의 차이점
SSG(Static Site Generation)은 서버에서 HTMl을 보내주는 방식을 취하여 SSR과 유사하나 언제 만들어주는지에 차이가 있다.
SSR은 요청시 서버에서 즉시 HTML을 만들어 응답하기 때문에 데이터가 달라지거나 수정이 어려운 페이지에 적합하고, SSG는 페이지들을 모두 서버에 만들어 놓은 후 해당페이지를 응답하는 것으로 캐싱해두면 좋을 페이지에 사용하면 적합하다.
4. CSR의 장,단점
4-1. 장점
- 페이지 전화신 화면 깜빡임이 없다.
- 초기 로딩 이후 구동 속도가 빠르다.
- TTV와 TTi의 시간차가 없다.
- 서버의 부하가 Client로 분산된다.
4-2. 단점
- 초기 로딩 속도가 느리다.
- 검색엔진(SEO)에 불리하다.
5. SSR의 장,단점
5-1. 장점
- 초기 구동속도가 빠르다.
- SEO에 능하다.
5-2. 단점
- 페이지 전환시 깜빡임이 있다.
- TTV와 TTI 사이 시간차가 있다.
- 서버 부하가 존재한다.
6. CSR 단점 보완 방법
6-1. 초기 로딩 속도 문제 해결
Code Spliting, Tree-Shaking, Chunk 분리 등을 통해 JS 번들 크기를 줄여 초기 DOM 생성 속도를 줄여 초기 로딩 속도를 개선할 수 있다.
6-2. 검색엔진 개선
Pre-rendering 방식을 통해 검색엔진을 개선할 수 있다.
7. 어떤 상황에 무엇을 써야할까?
| Rendering Method | Description |
|---|---|
| CSR | - 유저와 상호작용이 많다 - 대부분이 고객의 개인정보로 이루어진 페이지들이라 검색엔진에 노출될 필요는 없다 |
| SSR | - 회사 홈페이지여서 홍보나 상위노출이 필요하다 - 누구에게나 항상 같은 내용을 보여준다 - 업데이트가 빈번해 해당 페이지 데이터가 자주 바뀐다 |
| SSG | - 회사 홈페이지여서 홍보나 상위노출이 필요하다 - 누구에게나 항상 같은 내용을 보여준다 - 업데이트를 거의 하지 않는다 |
| Universal Rendering | - 사용자에 따라 페이지 내용이 달라진다 - 빠른 interaction과 화면 깜빡임이 없어야 한다 - SEO를 포기할 수 없어 상위노출이 되면 좋겠다 |
8. 대표적인 프레임워크
| Rendering Method | 대표적인 프레임워크 |
|---|---|
| CSR | - React - Vue.js - Angular |
| SSR | - Next.js (React 기반) - Nuxt.js (Vue.js 기반) - Angular Universal |
| SSG | - Next.js (React 기반, SSG 지원) - Nuxt.js (Vue.js 기반, SSG 지원) - Gatsby (React 기반) |
