서버 사이드 렌더링은 서버에서 HTML 파일을 저장해두었다가, 요청이 발생할 때 모든 파일을 브라우저에
전달하는 방식으로 SEO, 인덱싱, 크롤링에 최적화되어 있다.
반면, 클라이언트 사이드 렌더링은 서버에서 HTML 파일을 처리하지 않고, 브라우저의 자바스크립트를
상호작용하는 방식이다, 클라이언트 사이드 렌더링은 초기 로딩 이후 서버 사이드 렌더링에 비해 빠르다는
장점이 있다.
- 서버 사이드 렌더링(SSR) : 클라이언트 사이드 또는 유니버셜 앱 HTML을 서버를 통해 렌더링
- 클라이언트 사이드 렌더링(CSR) : 주로 DOM을 사용하여 브라우저에서 렌더링
그렇다면 SSR(서버 사이드 렌더링)과 CSR(클라이언트 사이드 렌더링)에 대하여 알아보자
SSR(서버 사이드 렌더링)
SSR은 정보를 화면에 표시하는 가장 일반적인 방법이다. 이는 서버 내 HTML 파일을 변환하여
브라우저에서 출력한다. 유저들이 웹사이트를 방문한 경우, 브라우저는 서버에 웹사이트 내용을 요청한다.
이 요청을 하는 데는 몇 밀리세컨즈 밖에 걸리지 않지만, 다음과 같은 요소들이 속도에 관여합니다.
- 인터넷 속도
- 서버의 위치
- 접속자 수
- 웹사이트 최적화 정도
요청 처리가 완료되면 브라우저는 렌더링이 완료된 HTML을 가져와 화면에 표시한다.
만약, 유저들이 다른 웹사이트를 방문할 경우 브라우저는 동일한 방식으로 새로운 요청을 매번 진행한다.
이때, 서버 사이드 렌더링은 모든 HTML을 매번 로딩한다.
서버 사이드 렌더링 장점
- 검색 엔진 SEO에 최적화
- 초기화면 로딩이 빠름
- 정적인 사이트에 좋음
서버 사이드 렌더링 단점
- 잦은 서버 요청
- 전체적으로 느린 페이지 렌더링
- 모든 페이지를 리로딩
- 사이트 상호 작용의 부족
CSR(클라이언트 사이드 렌더링)
CSR은 브라우저가 유저가 보는 UI를 만드는 모든 것을 한다는 것을 의미한다. 브라우저에서 자바스크립트를
사용해 콘텐츠를 렌더링하는 것을 의미한다. 즉, HTML 문서 자체에 모든 내용이 저장되는 것이 아니라, 자바스크립트를 사용하여 HTML 문서에 렌더링을 진행하는 것이다. 클라이언트 사이드 렌더링에서는 사용자가 ‘클릭’을 하거나 동작을 실행할 때, 더 많은 페이지 요소가 추가된다. 즉 서버사이드 렌더링과의 차이점 이라면, 서버에 문서를 요청하는 것이 아니라, 브라우저에서 이를 처리한다는 것이다.
즉, 자바스크립트를 통해 새로운 콘텐츠를 불러오고, 삭제할 수 도 있는 것이 클라이언트 사이드 렌더링이다.
클라이언트 사이드 렌더링은 속도 면에서 우수한데, 새로운 콘텐츠를 표시하기 위해 전체 페이지가 아닌 웹페이지의 아주 일부만 불러오기 때무이다. 그러나 애플리케이션 규모가 커짐에 따라 필요한 자바스크립트도 증가하여 페이지가 다른 면에서 무거워질 수도 있다.
클라이언트 사이드 렌더링 장점
- 사이트 상호 작용 활발
- 초기 룅 이후 빠른 웹사이트 렌더링
- 자바스크립트 라이브러리 활용
클라이언트 사이드 렌더링 단점
- 제대로 구현하지 않을 경우 SEO가 취약함
- 초기 로딩에 더 많은 시간이 걸림
- 대부분의 경우 추가적인 라이브러리를 필요로 함
참고
https://oneroomtable.tistory.com/entry/서버-사이드-렌더링과-클라이언트-사이드-렌더링이란-무엇인가요
