SSR(서버 사이드 렌더링)과 CSR(클라이언트 사이드 렌더링)
*렌더링:요청후 응답받은 내용을 브라우저에 표시하는 과정
SSR이란?
서버사이드렌더링의 약자로 서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링하는 방식
SSR의 동작과정
1. 클라이언트가 서버(백엔드)에 요청을 보낸다.
2. 서버에서는 화면에 표시해야하는 데이터를 가져온 후 해당데이터를 모두 삽입하고 css까지 모두 적용해서 렌더링 준비를 마친 HTML과 JS코드를 브라우저에 응답으로 전달한다.
3. 브라우저에서는 바로 전달받은 페이지를 표시해준다. 이어서 브라우저가 JS코드를 다운, HTML에 실행시킨다.
4. 요청을 보내고 응답을 받으면 새로고침되어 화면이 깜빡인 후에 표시된다.
SSR의 장점/단점
- 빠른초기로딩을 가진다(서버로부터 화면을 렌더링하기위한 필수적인 요소를 먼저 가져오기 때문에 클라이언트사이드 렌더링보다 초기로 로딩속도가 빠르다)
- TTV(Time to View)와 TTI(Time to Interact)간에 시간간격이 존재하게 된다.
(이렇게 되면 사용자가 버튼을 클릭하거나 이동하려고 해도 아무런 반응이 없을 수 있다)
- 매번 페이지를 요청할때마다 새로고침되기 때문에 사용자 경험이 다소 떨어진다.
- 서버측 부하가 증가한다(페이지를 요청할때마다 서버에서 페이지를 구성하는 모든 리소스를 준비해서 응답해야 하므로 서버부담이 증가한다)
---
CSR이란?
클라이언트 사이드 렌더링이란 사용자의 요청에 따라 필요한 부분만 응답받아 렌더링하는 방식
CSR의 동작과정
1. 클라이언트에서 초기화면을 로드하기 위해 서버에 요청을 보낸다.
2. 서버는 화면에 표시하는데 필요한 완전한 리소스를 응답한다.
*여기서 클라이언트 사이드렌더링방식이 서버사이드 렌더링방식과 다른점은 모든 js파일을 다운받아야 하기 때문에 초기로딩시간이 더 오래걸린다는 점이다.
이후의 동작
1. 클라이언트는 이전과 같이 서버에 요청을 보낸다.
2. 서버는 변경된 부분에 대한 리소스만 응답한다.
3. 화면이 깜빡이지 않고 수정된 리소스만 변경된다.
CSR의 장점/단점
- 빠른속도와 서버부하감소(변경된 부분과 관련된 데이터만 가져오므로 서버사이드렌더링에 비해 빠르고, 변경된 부분만 요청함으로써 서버의 부담을 줄일 수 있다)
- 사용자 친화적(페이지 안에 컨텐츠를 클릭하여 다음 단계로 전환 하는 과정에서 링크가 없기 때문에 깜빡임없이 부드러운 이동을 경험할 수 있다)
- 자바스크립트를 사용하여 사용자와 상호 작용 후에 페이지 내용을 로드하기 때문에 웹 크롤러가 페이지를 색인화 하려고하면 내용의 빈페이지처럼 보이게된다.
- 초기로딩속도가 느림(초기 요청시에는 모든 js파일을 다운받아야 하기 때문에)
---
어떤 방식을 사용하는것이 좋을까?
=> 서비스,프로젝트, 콘텐츠의 성격에 따라 다르다.
예)
- 상위 노출 필요
- 누구에게나 동일한 내용 노출
- 페이지마다 데이터가 자주 바뀐다.
==> 서버사이드렌더링
- 개인정보 데이터를 기준으로 구성되거나
- 보다 나은 사용자경험을 제공하고 싶거나
- 상위노출보다 고객의 데이터 보호가 더 중요하다면
==> 클라이언트사이드렌더링
[참고]
https://miracleground.tistory.com/165
Web