[FE] CSR, SSR 의 차이
0. 개요
목차
| 페이지 구성 방식 |
| SSR |
| CSR |
| 결론 |
1. 서론
[페이지 구성방식]
(1) SPA
- 1. 하나의 페이지에서 새로운 페이지를 가져오지 않고, 필요한 부분만 동적으로 변경
- 2. React, Vue, Angular 와 같은 프레임워크가 SPA 서비스를 위해 많이 쓰이고 있음
- 장점
- 초반 렌더링 시, 애플리케이션 가동에 필요한 정적 파일을 받아오므로 이후 새로고침을 할 필요가 없음.
- 그렇기에 기존 MPA 에서 느꼈던 딱딱 끊기는 모습이 보이지 않음, 부드럽고 자연스러운 사용자 경험을 느끼게 해줌.
- TTV와 TTI가 동시에 시작되기에, 사용자는 페이지가 로딩되자마자 곧바로 애플리케이션을 사용할 수 있음.
- 또한 이후의 동작에서 추가적인 정보가 필요한 경우에는 필요한 리소스만 요청하기에, 서버의 부담이 상대적으로 적어진다.
- 기존에는 서버에서 렌더링 된 페이지를 받았다면, SPA의 경우 최초 요청 이후 내부에서 렌더링을 하기에 서버의 부담을 분산시킨다.
- 단점
- 초기에 애플리케이션 가동에 필요한 대부분의 리소스를 받아야 하기에, 곧바로 페이지를 로딩하지 못한다.
- 즉 TTV (Time To View) 가 상대적으로 늦음. 페이지 렌더링 전까지 사용자는 텅 빈 화면만 바라보아야 함.
- 이를 해결하기 위해 많은 양의 JS 코드를 번들링 하여 분할 제공하는 Code Splitting 기법이 있으나, 근본적인 해결책은 아님.
- SEO (Search Engine Optimization), 즉 검색 엔진 최적화를 진행하기 어려움. 서버에는 초기 HTML이 비어있는 경우가 많기 때문.
- 사용자의 정보를 클라이언트 측에서 관리할 경우, 보안 이슈가 발생할 수 있음. (저장할 공간이 쿠키, 스토리지 뿐)
(2) MPA
-1. 여러 개의 페이지로 이루어진 어플리케이션이며, 새로운 페이지를 요청할 때마다 서버에서 렌더링 된 정적 리소스를 전달함.
-2. 현재 페이지에서 다른 페이지로 이동하거나, 새로고침이 진행될 경우 서버에서 페이지를 다시 렌더링 해야 한다.
- 장점
- 서버에서 사전에 렌더링 된 정적 리소스를 받음으로서 빠르게 애플리케이션 화면을 띄울 수 있다.
- 즉 TTV 가 SPA에 비해 월등히 빠르다. 클라이언트에서는 사전에 렌더링된 페이지를 띄우기만 하면 되기 때문이다.
- SEO (Search Engine Optimization), 즉 검색 엔진 최적화를 진행하기 쉬움, 서버에서 사전에 만들어진 HTML을 전달받기 때문.
- 단점
- 화면을 빠르게 띄울 수 있으나, 동적인 인터렉션을 담당하는 JS 파일을 적용하기까지의 텀이 있음.
- 즉 TTI (Time To Interact) 가 TTV보다 상대적으로 늦고, 그 시간 동안 사용자는 어떠한 인터렉션도 진행할 수 없음
- 페이지를 이동할 때마다 결국 서버에서 사전에 렌더링 된 파일을 받아야 하기에, 매 요청마다 깜빡임 현상이 발생함.
- 서버에서 매 요청 시에 보내야 할 데이터의 사이즈가 커짐으로서, 서버 트래픽이 상승할 가능성이 높음.
2. 본론
SSR(Server Side Rendering)
: 서버 사이드 렌더링
말 그대로 서버 쪽에서 렌더링을 하여 화면을 보여주는 방식이다. 서버로부터 완전하게 만들어진 HTML 파일을 받아와 화면을 그리기 때문에 첫 화면 로딩 속도가 빠름.
화면을 그리는 주체가 서버이기 때문에 요청이 들어올 때마다 서버에서 새로운 화면을 만들어서 제공한다.
[장점]
- 첫 페이지 로딩속도가 빠름
- 검색엔진 최적화 가능
[단점]
- 초기 로딩 이후 페이지 이동 시 속도가 CSR에 비해 느림
- 깜빡임 이슈 ( 매번 새로고침)
- 서버 과부하
- TTV (Time To View) 와 TTI(Time To Interact)
TTV (Time To View) : 사용자가 어플리케이션 화면을 "보기까지" 걸리는 시간.
TTI (Time To Interact) : 사용자가 어플리케이션 화면과 "상호작용" 할 수 있기까지 걸리는 시간.
CSR (Client Side Rendering)
: 클라이언트 사이드 렌더링
여기서는 클라이언트 (브라우저) 가 렌더링을 맡는다. 서버에서 받은 데이터를 클라이언트인 브라우저가 화면에 그림. 따라서 서버는 빈 껍데기만 주고 클라이언트가 JS를 다 읽어와야 실행이 되기 때문에 처음 화면을 띄우는 데 시간이 걸림.
그리고 .. 껍데기 뿐이라서 크롤링? 이 어렵단다!?
이는 요즘 화면을 그리는 방식인 SPA(Single Page Aplication)과도 밀접한 연관이 있다. SPA는 처음 한번 페이지 전체를 로딩한 후 필요시 데이터만 바꿔 화면을 그려주는 것을 말한다. like 네이버 쇼핑(https://shopping.naver.com/home) : 화면은 그대로 있고 필요한 부분의 정보만 바뀌며 화면이 그려짐
SPA는 클라이언트사이드렌더링방식이다. 최근 개발할때 많이 사용하는 React도 SPA이다. CSR은 SPA 트랜드와 CPU 성능 상승 +JS 표준화(리액트, 뷰, 앵귤러 등 프레임워크의 발전)와 함께 본격적으로 시작되었다.
[장점]
- 새로고침이 발생하지 않아 사용자 경험에 도움을 준다
- 초기 로딩 이후 빠른 웹사이트 렌더링이 가능
- 필요한, 변경된 데이터만 받아오므로 트래픽 감소
[단점]
- 검색 엔진 최적화에 보완필요
- 초기 로딩 느림
3. 결론
출처: https://youtu.be/YuqB8D6eCKE?si=LovkhYFJNlvtIDjG
ㅓ