서버 사이드 렌더링(SSR) vs 클라이언트 사이드 렌더링(CSR)
서버 사이드 렌더링(SSR)
사용자가 페이지를 이동할 때마다 서버에서 새로운 페이지를 받아온다.
서버가 내용이 담긴 html 파일을 보내면 브라우저가 받아서 렌더링한다.
이후 브라우저는 서버로부터 js 파일을 받아 페이지에 적용시킨다.
서버로부터 만들어진 html을 받기 때문에 첫 페이지를 보여주는 로딩 속도가 빠르다.
페이지 이동 시마다 서버에서 페이지를 불러오므로 서버 과부하가 생길 수 있다.
html 파일을 불러온 후 js 파일을 불러오기 때문에, 페이지는 렌더링됐지만 js는 아직 적용되지 않는 시간이 생길 수 있다.
클라이언트 사이드 렌더링(CSR)
첫 요청할 때 내용이 비어있는 html 파일을 서버에서 불러온다.
ajax를 통해 필요한 부분만 서버에 요청하고, dom을 그리는 역할은 클라이언트 측에서 직접 렌더링한다.
번들링 된 js 파일을 불러온 후에야 html 문서에 dom을 그릴 수 있기 때문에 처음 페이지가 보여지는 시간이 느리다.
js 파일을 하나로 번들링하면 크기가 커져 렌더링 속도가 더 느려지는데, code splitting 등을 통해 js 파일을 쪼개면 성능을 향상시킬 수 있다.
ex) React.js, Vue.js 등의 SPA
전체적인 과정
서버 사이드 렌더링과 클라이언트 사이드 렌더링의 차이
서버 사이드 렌더링과 클라이언트 사이드 렌더링의 차이는 어디서 화면에 보일 페이지의 내용을 그리느냐의 차이이다.
서버 사이드 렌더링은 서버에서 페이지의 내용을 다 그려서 브라우저로 던져주고, 클라이언트 사이드 렌더링은 페이지의 내용을 브라우저에서 그리게 된다.
이 그린다는 표현 때문에 SSR 방식에서 렌더 트리를 생성하는 시점이 헷갈렸는데, 서버에서 렌더 트리를 생성해서 보내준다는 뜻이 아니라 CSR과 달리 html이 완성된 채로 오는 것을 의미한다.
CSR에서 js를 통해 요소들을 dom에 집어넣는 것을 그린다고 표현하기 때문에 SSR에서는 페이지를 그려서 온다고 표현해서 헷갈린 것.
결론적으로 렌더 트리는 브라우저의 렌더링 엔진이 생성한다.
| 구분 | 서버 사이드 렌더링 | 클라이언트 사이드 렌더링 |
|---|---|---|
| 장점 | - 검색엔진 최적화(SEO) 가능 - 렌더링된 html을 클라이언트에 전달해주기 때문에 초기 로딩 속도가 빠름 (성능 개선) | - 트래픽 감소 - 클라이언트 측에서 렌더링하기 때문에 서버 측에서 렌더링하는 것보다 빠른 인터렉션 |
| 단점 | - 프로젝트의 복잡도 - 페이지 요청마다 새로고침 발생 - 서버 렌더링에 따른 부하 발생 | - 초기 구동속도가 느림 - 검색엔진 최적화(SEO)가 어렵다. |
참고사이트
서버사이드 렌더링(ssr) & 클라이언트 사이드 렌더링(csr)
서버사이드렌더링 & 클라이언트사이드렌더링
서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR)
SSR 개념 이해와 Next.js로 실습까지 해보는 SSR 환경 구축하기
[Web][Performance][Chrome] 웹 프론트의 성능을 보자(2) - 웹페이지가 로딩되는 순서 보기