서버 사이드 렌더링(ssr) & 클라이언트 사이드 렌더링(csr)
by coco3o시작하기 앞서 공통적으로 사용된 단어인 렌더링에 대해 알고 가도록 하자.
렌더링이란?
어떤 웹 페이지에 접속 시, 그 페이지를 화면에 그려주는 것이다.
서버 사이드 렌더링 (Server-Side Rendering)
서버 사이드 렌더링(SSR) 은 페이지를 이동할 때마다 새로운 페이지를 요청 한다.
모든 템플릿은 서버 연산을 통해 렌더링하고 완성된 페이지 형태로 응답한다.
SSR을 활용한 기술로는 MPA(Multi Page Application)가 있다.
MPA란?
여러 페이지로 구성된 웹 어플리케이션이다.
사용자의 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로운 html을 받아와서
해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식이다.
- SSR의 장점
- 초기 렌더링 속도가 매우 빠르다.
- 검색 엔진 최적화(SEO) 가능
- SSR의 단점
- 프로젝트의 복잡도
- 초기 렌더링 수행은 빠르지만 연속적으로 렌더링 수행할 경우 서버 과부화 발생우려
클라이언트 사이드 렌더링 (Client-Side Rendering)
클라이언트 사이드 렌더링이란 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식이다.
CSR을 활용한 기술로는 SPA(Single Page Application)가 있다.
SPA란?
하나의 페이지로 구성된 웹 어플리케이션이다.
브라우저에 최초에 한번 페이지 전체 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식이다.
단일 페이지 어플리케이션(SPA)는 현재 웹 개발의 트렌드로 볼 수 있고, react,와 vue, 앵귤러와 같은 자바스크립트 프레임워크 등이
spa의 방식을 가지고 있다.
- CSR의 장점
- 서버와 클라이언트 사이의 데이터 양과 트래픽이 감소된다.
- 연속된 렌더링으로 인한 과부하를 줄일 수 있다.
- CSR의 단점
- 검색 엔진 최적화(SEO) 사용이 불가능하다.
- 렌더링을 위해 필요한 작업이 많아진다. (개발과 유지보수에 필요한 작업이 많다.)
서버 사이드 렌더링(SSR) vs 클라이언트 사이드 렌더링(CSR)
초기 View 로딩 속도
- SSR의 경우 View를 서버에서 렌더링하여 가져오기 때문에 첫 로딩이 매우 빠르다.
(물론, JS 파일을 모두 다운로드하고 적용하기 전까지는 그 어떤 인터렉션도 반응하지 않지만 사용자 입장에서는 로딩이 매우 빠르다고 느낄 수 있음)
- 반면 CSR의 경우 서버에서 View를 렌더링하지 않고, HTML, JS파일, 각종 리소스를 다운로드 받은 후 브라우저에서 렌더링을 하기 때문에 SSR보다 초기 View 로딩 속도는 느리다.
그렇지만 CSR은 사용자의 행동에 따라 필요한 부분만 다시 읽기 때문에 서버 측에서 렌더링하여 전체 페이지를 다시 읽는 것보다 빠른 인터렉션이 가능하다.
첫 로딩 속도는 SSR가 빠르고, CSR는 느리다. 하지만 첫 로딩 속도를 제외하면 그 다음부터는 CSR이 빠른 인터렉션의 성능을 보인다.
SEO 문제
CSR방식의 사이트에서는 View를 생성하기 위해 JS를 실행시켜야 한다.
하지만 대부분 웹 크롤러 봇들은 JS를 실행시키지 못하기 때문에 HTML에서만 콘텐츠를 수집하게 되고,
CSR 페이지를 빈 페이지로 인식하게 된다.
보안 문제
- SSR에서는 사용자에 대한 정보를 서버 측에서 세션으로 관리 한다.
- 반면 CSR의 경우 쿠키 말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않다.
정리하면
- SSR의 경우 초기 로딩속도가 빠르고 검색 엔진 최적화(SEO)에 유리하지만,
View 변경시 서버에 계속 요청 해야 하므로 서버에 부담이 크다.
- CSR의 경우 초기 로딩속도는 느리지만 이후에는 서버에 다시 요청할 필요없이 클라이언트 내에서 작업이 이뤄지므로 빠르다.
하지만 SEO 문제가 있다.
'🪐Server' 카테고리의 다른 글
| 클라우드 컴퓨팅(Cloud Computing)이란? (0) | 2022.04.15 |
|---|---|
| 서버리스(Serverless)란? (0) | 2022.04.09 |
| 스케일 업(Scale-Up)과 스케일 아웃(Scale-Out)이란? (0) | 2022.02.07 |
| JWT(Json Web Token) 란 무엇일까? (서버 기반 인증 / 토큰 기반 인증) (3) | 2021.09.06 |
| REST란? REST API 와 RESTful API의 차이점 (6) | 2021.08.13 |
블로그의 정보
슬기로운 개발생활
coco3o