보통 페이지를 렌더링하는데 사용되는 방식은 두가지가 있다. 서버측에서 렌더링하는 SSR, 클라이언트측에서 CSR.
요새는 CSR을 많이 사용하는것으로 알고 있는데, 이 두가지가 어떻게 다른지 알아보려 한다.
우선 CSR, SSR 정리전 SPA, MPA 부터 정리하고 가보겠다.
SPA (Single Page Application)
SPA란 처음 데이터를 모두 받아온 다음 Single page에서 필요한 요소만 받아오는 application을 의미한다.
예로, 특정 버튼을 눌렀을 때, 헤더는 고정되어 있고 일부분만 변경되는 사이트들이다.
MPA (Multi Page Application)
MPA란 여러개의 페이지로 구성된 application을 의미한다. 특정 버튼을 누르거나 요청했을때 새로운 html을 서버에게 요청해서 모두 받아와서 새롭게 렌더링하는 전통적으로 application을 구성하는 방식이다.
MPA의 단점이라면 항상 새로운 html과 데이터를 받아와서 페이지를 렌더링해야하기에 부하가 크다는 점이 있다. (또한 화면이 새로고침되면서 깜빡이게 되면서 사용자가 불편함을 느끼기도 한다.)
이 단점들을 보완하기 위하여 ajax가 등장한 이후로 사용자가 원하는 부분만 갈아끼우는 방식인 SPA를 많이 채택했다고 한다.
CSR 과 SSR, SPA와 MPA
SPA와 MPA는 페이지 구성 방식을 의미하고, CSR 과 SSR은 렌더링방식을 의미한다.
주로 SPA는 렌더링 방식으로 CSR를 채택하고, MPA는 렌더링 방식으로SSR을 채택하는데,
때로는 SPA == CSR, MPA == SSR이라는 오해를 하기도 한다. 두 개념은 페이지가 몇개인지, 렌더링 방식이 어디서 이뤄지는지에 따라서 구분되는 다른 개념이라는걸 잊지말자.
CSR (Client Side Rendering)
CSR은 클라이언트 측에서 렌더링을 하는 방식이다. 동작방식은 아래와 같다.
- 유저가 웹사이트를 방문한다.
- 브라우저는 유저가 요청한 콘텐츠를 서버측으로 요청한다.
- 서버는 빈 뼈대의 HTML과 연결된 JS 링크를 브라우저에게 응답해준다.
- 브라우저는 연결된 JS를 다운받고, 동적으로 페이지를 만들어서 렌더링한다.
CSR의 특징
- 초기에 서버에서 연결해주는 JS를 다운로드 해야하므로 초기 첫 로딩 속도가 느리다. 단, 이후에는 페이지의 일부만 요청해서 가져올 수 있기에 속도가 빠르다.
- 대부분 연산이나 라우팅을 클라이언트 측에서 하기에 서버의 부하를 많이 줄여줄 수 있다. 단, 이 말은 클라이언트 측에서 처리할 일들이 많다는 뜻이기도 하다.
- 브라우저의 웹 크롤러들은 HTML을 읽어서 검색 인덱싱을 하는데, 빈 HTML을 받아오기에 검색 사이트에 노출되지 않는 경우가 많다. (SEO, 검색엔진최적화가 좋지 않다.)
React, Vue 등 자바스크립트로 이루어진 프론트 프레임워크를 사용하면 CSR방식인 경우가 대부분이다.
SSR (Server Side Rendering)
SSR은 서버측에서 렌더링을 하는 방식이다. 동작방식은 아래와 같다.
- 유저가 웹사이트를 방문한다.
- 브라우저는 유저가 요청한 콘텐츠를 서버측으로 요청한다.
- 서버는 렌더링 준비를 마친 HTML과 JS 를 응답해준다.
- 브라우저에서는 응답받은 HTML을 즉시 화면에 띄운다.
- 브라우저는 JS를 다운받고 HTML에 로직을 연결해준다.
PHP, JSP나 템플릿 엔진을 사용하는 경우에는 SSR인 경우가 대부분이다.
SSR의 특징
- 렌더링된 HTML을 서버에서 받아오기에 사용자에게 바로 보여줄 수 있다. 단 이때는 JS를 HTML에 연결한 상태가 아니기에 사용자가 특정 버튼을 눌러도 기능이 동작하지 않을 수 있다. 한마디로 보여주는데 까지 걸리는 시간과, 상호작용이 가능한 시간이 다르다는 뜻이다. 이를 TTI (Time To Interactive) 와 TTV (Time To View) 가 다르다고 표현한다.
CSR와 SSR의 장단점
CSR
- 장점
- 초기 로딩이후 다른 요청시 속도가 빠르다.
- TTV와 TTI의 간격이 존재하지 않는다. (보인다는 것은 기능도 동작한다는 뜻)
- 연산을 대부분 클라이언트에서 수행하기에 서버의 부하를 나눠가진다.
- 화면이 깜빡 거리지 않아 사용자 입장에서 불편함을 덜 느낀다.
- 단점
- 초기 로딩속도가 느리다.
- 서버의 부하를 나눈다는것은, 클라이언트의 부하가 커질수도 있다는 뜻이다.
- SEO(검색엔진 최적화) 에 불리하다.
SSR
- 장점
- 페이지 초기 로딩이 빠르다.
- 렌더링이 준비된 상태의 HTML을 서버에서 바로 받기때문에, SEO에도 유리하다.
- 단점
- 화면의 깜빡임이 존재한다.
- TTV와 TTI의 간격 차이가 있기에 사용자가 의문의 경험(?)을 가질수도 있다.
- 서버에 연산이 몰려있기에 서버의 부하가 커진다.
언제 CSR, 언제 SSR을 사용해야할까?
CSR
- 네트워크 속도가 빠를 때 (CSR은 한번에 모든 것을 불러온다. SSR은 페이지마다 나눠 불러옴)
- 서버의 성능이 좋지 않을 때
- 사용자와 상호작용할 컨텐츠가 많을 때 (HTML만 먼저 보여줬는데 기능까지 합치는데 오래 걸리는 경우. )
- SEO가 필요없는 경우 (개인정보와 관련된 사이트는 검색이 안되는게 차라리 더 좋다.)
SSR
- 네트워크 속도가 느릴 때
- 서버의 성능이 좋을 때
- 최초 로딩이 빨라야 할 때
- 상호작용이 별로 없을 때 (HTML이 바로 렌더링 되니까)
- SEO가 필요한 경우 (검색으로 유입이 되어야 하는 경우)
학습 References
(공부하다보면 테코톡이 정말 도움이 많이된다.. 글보다는 말로 설명해주는게 나는 이해가 잘 되기에)
https://www.youtube.com/watch?v=YuqB8D6eCKE&ab_channel=%EC%9A%B0%EC%95%84%ED%95%9C%ED%85%8C%ED%81%AC
https://proglish.tistory.com/216
'개발' 카테고리의 다른 글
| MSA 아키텍쳐란? (0) | 2023.09.28 |
|---|---|
| 쿠키 / 세션 / 토큰(JWT) 의 차이는? (0) | 2023.09.27 |
| [Typescript] Path alias (import 경로 단축) (0) | 2023.09.19 |
| TypeScript는 왜 사용하는 걸까? (0) | 2023.09.11 |
| 슬랙 알람 봇 만들고 배포하기 [JAVA / SPRING BOOT] (0) | 2023.08.28 |