네트워크 기초 2. SSR과 CSR_웹페이지 동작 방식
웹 페이지를 렌더링 하는 방식 중 대표적인 두가지 SSR vs CSR에 대해서 적어보려고 한다
SSR vs CSR
SSR ( Server Side Rendering ) : 웹 페이지를 브라우저에서 렌더링 하는 대신에 서버에서 렌더링한다
즉, 서버로부터 완전하게 만들어진 HTML 파일을 받아와 페이지 전체를 렌더링하는 방식
그렇기 때문에 중간에 값이 바뀌어도 변경되지 않은 값들까지 다시 새로고침을 하고 화면이 깜빡인 후에 표시된다.
이러한 방식으로 인해 서버 측 부하가 증가한다는 단점이 생길 수 있다
페이지를 요청할 때마다 서버에서 페이지를 구성하는 모든 리소스를 준비해서 응답하기 때문
SSR을 사용하는 경우(ex. 네이버 블로그, 신문사)
- 네트워크가 느릴 때
한번에 모든 것을 불러오는 CSR과 다르게 SSR은 각 페이지마다 나눠 불러온다
- *SEO가 필요할 때
화면을 구성하는 각각의 페이지가 있기 때문에 검색엔진 최적화에 유리
- 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우, 단일 파일의 용량이 작은 SSR이 적합
서버로부터 화면을 렌더하기 위한 필수적인 요소를 먼저 가져오기 때문
- 웹 페이지가 사용자와 상호작용이 적은 경우
- 메인 스크립트가 크고 로딩이 매우 느릴 때
CSR( Client Side Rendering) : 랜더링이 클라이언트(웹 브라우저) 쪽에서 일어난다
CSR은 사용자가 다른 경로를 요청할 때마다 페이지를 새로고침하지 않고, 동적으로 라우팅을 관리한다
쉽게 말해 요청에 따라 필요한 부분만 따라 렌더링하는 방식이다.
페이지 이동에 있어서 깜빡임 없이 자연스럽게 이동하기 때문에 사용자 친화적이라는 장점이 있지만 처음 첫 페이지를 로딩할 때 모든 JS 파일을 다운받아야 하기 때문에 초기 로딩시간이 더 오래 걸린다는 단점이 있다
CSR을 사용하는 경우 (ex. 아고다 같은 예약 사이트)
- SEO가 우선순위가 아닌 경우
현재 구글의 크롤러 봇이 만들어져 가능해지기는 했지만 완벽한 단계는 아님
- 사이트의 풍부한 상호작용이 있는 경우
예약페이지는 사용자와 상호작용이 잦고 페이지간 이동도 많기 때문에 CSR을 이용 하는 것이 유리하다
때론 아예 렌더링 되지 않고 사용자의 행동을 막는 것이 오히려 유리할 수 있다
- 사용자에게 보여줘야 하는 데이터의 양이 많을 때
- 네트워크가 빠른 경우
- 서버의 성능이 좋지 않을 때
이 외에도 SSG(Static Site Generator), Universal Rendering, ISR(Incremental Static Regeneration)등의 동작방식이 있다
* SEO (Search Engine Optimization) : 검색 엔진 최적화
검색엔진이 웹을 크롤링하면서 페이지에 컨텐츠 색인을 생성하는 과정
참고
https://proglish.tistory.com/216