[Web] SSR (서버사이드 렌더링) vs CSR (클라이언트 사이드 렌더링)
우선 렌더링이 뭘까?
- 서버로부터 받은 내용을 브라우저 화면에 표시 하는 것
렌더링의 과정
- Loader 가 서버로 부터 정보들을 불러옴
- 파싱을 통해 문서를 DOM 트리로 만든다.
- DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축
- CSS 설정/레이아웃 위치 지정
- 렌더링 트리가 그려짐
이렇게 렌더링 받은 페이지를 어떻게 보여줄까?
MPA vs SPA
MPA (Multi Page Application)의 약자로 여러 페이지로 구성된 웹 어플리케이션. 사용자의 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로은 html을 받아와 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식
SPA (Single Page Application)의 약자로 하나의 페이지로 구성된 웹 어플리케이션. 브라우저에 최초에 한 번 페이지 전체를 로드하고, 이후에는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식
이러한 단일 페이지 어플리케이션(SPA)는 현재 웹개발의 트랜드로 볼 수 있고, React, vue, angular와 같은 자바스크립트 프레임워크등이 SPA의 방식을 가지고 있다
- SSR은 새로운 파일을 불러오지만, CSR은 JSON 파일의 데이터만 받아온다
SSR (Server Side Rendering) 개념 및 특징 & 동작과정
Multi Page Application MPA는 SSR 방식을 채택한다
SSR이란 Server Side Rendering의 약자로 서버로부터 완전하게 만들어진 html 파일을 받아와 사용자에게 보여줄 페이지를 모두 구성 즉,전체를 렌더링 하는 방식이다
- 한 마디로 서버에서 다 완성한 뒤에 클라이언트에게 보낸다는 뜻
동작과정
먼저 클라이언트가 초기 화면을 로드하기 위해 서버에 요청을 보낸다. 그럼 서버는 화면에 표시하는데 필요한 데이터를 얻어와 모두 삽입하고 CSS까지 모두 적용해서 렌더링 준비를 마친 HTML과 JS코드를 브라우저에 응답으로 전달한다. 브라우저에서는 바로 전달 받은 페이지를 띄우고 브라우저가 JS 코드를 다운로드하고 HTML에 실행한다
하지만, 여기서 세모를 네모로 변경하면 이전과 마찬가지로 서버 HTML로 화면에 표시하는데 필요한 완전한 리소스의 응답한다. 즉, 세모 뿐만 아니라 동그라미 마름모까지 모두 서버로부터 다시 다운받아 온다. 이러한 이유로 요청을 보내고 응답을 받으면 새로고침되어 표시된다. 이 프로세스가 반복되면 서버 부하가 증가하고 불필요한 인터넷 대역폭이 소모될 수 있다
장점
SEO제공
- 검색엔진최적화 라고도 불린 SEO란 검색엔진이 웹을 크롤링 하면서 페이지에 컨텐츠 색인을 생성하는 과정
서버사이드 렌더링을 채택하는 멀티 페이지 어플리케이션은 화면을 구성하는 각각의 페이지가 있기 때문에 SEO의 유리한 장점이 있다 (모든 데이터가 이미 HTML에 담겨진채로 브라우저에 전달되기 때문에 검색엔진 최적화에 유리)
빠른 초기 로딩
서버로부터 화면을 렌더 하기 위한 필수적인 요소를 먼저 가져오기 때문에 클라이언트 사이드 렌더링보다 초기로 로딩 속도가 빠르다
단점
TTV / TTI
초기 로딩속도가 빠른 만큼 동시에 치명적인 단점이 생긴다. TTV (Time To View)와 TTI (Time To Interact)간에 시간 간격이 존재하게 된다. 사용자가 버튼을 클릭하거나 이동하려고 해도 아무런 반응이 없을 수 있다
서버 부화
매번 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 경험이 다소 떨어지고 서버측 부하가 증가한다. 페이지를 요청할 때마다 서버에서 페이지를 구성하는 모든 리소스를 준비해서 응답하므로 서버 부담이 증가한다
CSR (Client Side Rendering) 개념 및 특징 & 동작과정
싱글 페이지 어플리케이션은 클라이언트 사이드 렌더링을 채택한다
클라이언트 사이드 렌더링이란 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링하는 방식이다
동작과정
먼저 클라이언트에서 초기화면을 로드하기 위해 서버에 요청을 보낸다. 그럼 서버는 화면에 표시하는데 필요한 완전한 리소스의 응답한다. 여기서 클라이언트 사이드 렌더링 방식이 서버사이드 렌더링 방식과 다른 점은 모든 JS파일을 다운받아 하기 때문에 초기 로딩 시간이 더 오래 걸린다는 점이다 하지만 후속 페이지의 로드 시간이 빠르다. SSR과 달리 서버와의 통신은 런타임 데이러를 얻을 때만 발생한다. 또한, CSR은 서버 호출 시마다 전제 UI를 다시 불러올 필요가 없다
이번에도 요소 중에 세모를 네모로 변경하면 클라이언트는 이전과 같이 서버의 요청을 보낸다. 서버는 변경된 부분인 세모와 관련된 리소스만 응답하고 바로 수정된 데이터가 표시된다
장점
빠른 속도와 서버 부하 감소
클라이언트 사이드 렌더링 방식은 부분과 관련된 데이터만 가져오므로 서버사이드 렌더링보다 빠른 속도를 보인다
(즉 경로가 변경될 때(프레임워크/라이브러리에서 제공하는 router 기능이 동작할 때) DOM을 조작하여 페이지 컴포넌트를 변경해서 실제로 하나의 파일로 동작하지만 서로 다른 View를 보여줄 수 있게 된다. 그리고 이런 페이지 컴포넌트가 변경될 때 필요하다면 웹 서버와 통신하여 컴포넌트를 그리는 데 필요한 데이터를 요청할 수 있다. 필요할 때만 서버와 요청하여 데이터를 받아오는 것이 효율적인 측면에서 볼 때 강점으로 작용한다)
또한, 변경된 부분만 요청하기 때문에 서버의 부담을 줄일 수 있다
사용자 친화적
페이지 안에 컨텐츠를 클릭하여 다음 단계로 전환하는 과정에서 링크가 없기 때문에 부드러운 이동을 경험할 수 있다
단점
SEO
CSR을 채택한 싱글 페이지 어플리케이션은 자바스크립트를 사용하여 사용자와 상호 작용 후에 페이지 내용을 로드하기 때문에 웹 크롤러가 페이지를 색인화 하려고 하면 내용의 빈 페이지 처럼 보이게 되므로 SEO에 불리하다
(열심히 만들었는데 검색사이트에 노출되지 않는다는 단점)
초기 로딩 속도가 느리다
클라이언트 사이드 렌더링은 초기에 모든 JS 파일을 다운받아 와야 하기 때문에 초기 로딩 시간이 오래 걸린다
렌더링 방식 선택기준
동적 컨텐츠 로딩
서버는 높은 컴퓨팅 성능, 더 빠른 네트워킹 속도를 가진 시스템에 위차한다. 그래서 서버는 대규모 요청 처리에 필요한 추가 작업을 기대할 수 있다. 따라서 서버 측에서 컨텐츠를 가져오는게 훨씬 빠르다. 하지만 클라이언트 측 시스템은 제한된 컴퓨팅 성능을 제공하기 때문에 컨텐츠 렌더링을 완료하는데 더 많은 시간이 필요하다. 사이트에 동적 컨텐츠 렌더링이 반복되는 경우 SSR이 더 좋은 선택
웹 앱 UX & 사이트 UX
웹 앱과 웹 사이트는 각각 다른 형식의 웹 컨텐츠다. 웹 앱은 사용자가 데이터 입력 및 보고서 생성 같은 작업을 수행해야 하므로 더 많은 상호 작용이 필요하다. 반면 웹 사이트는 단순히 비즈니스에 대한 정보를 제공하는 페이지. 이를 염두에 두고 CSR은 각 클릭이 너무 오래 걸리지 않도록 하는데 도움이 될 수 있어 웹 앱에 가장 적합하다. 그러나 웹 사이트와 관련해 SSR은 검색 엔진 봇에 대한 올바른 메타데이터를 보장하기 때문에 CSR보다 훨씬 좋다
내 상황에서 기능적이고 실용적인 방법을 고르자
정리
- 검색 엔진 발명 이후 HTML을 화면에 설정하는 일반적인 방법은 SSR
- 현대 웹 대부분은 보다 동적이고 확장 가능한 웹 사이트를 만드는 방법을 제공하기 때문에 더 유연한 CSR로 구축
- SSR의 경우 브라우저에 대한 서버 응답은 렌더링 준비가 된 HTML 페이지인 반면, CSR의 경우 브라우저는 자바스크립트에 대한 링크가 있는 빈 문서를 제공. 이는 브라우저가 모든 자바스크립트가 다운로드 되고 실행될 때까지 기다릴 필요 없이 서버에서 HTML렌더링을 시작한다는 의미
- SSR은 CSR보다 느리다. 서버가 빈 응답을 보내는 대신 HTML 생성에 시간을 써야 하기 때문이다
- 서버의 SSR 처리량은 CSR 처리량보다 훨씬 적다
출처 : 아래의 사이트들을 보면서 큰 공부 하였습니다
https://onlyfor-me-blog.tistory.com/387
https://velog.io/@ash3767/서버사이드-렌더링-클라이언트-사이드-렌더링
https://miracleground.tistory.com/165
https://oneroomtable.tistory.com/entry/서버-사이드-렌더링과-클라이언트-사이드-렌더링이란-무엇인가요