CS & SW & IT 용어
[SSR] 란 무엇인가
Haksae
2022. 1. 16. 15:34
1. 렌더링 (Rendering)
서버로부터 요청해서 받은 내용을 브라우저 화면에 표시하는 것
렌더링 프로세스
- Loader가 서버로부터 정보들을 불러옴
- 파싱을 통해 문서를 DOM 트리로 만든다.
- DOM 트리가 구축되는동안 브라우저는 렌더 트리를 구축
- CSS 설정/레이아웃 위치 지정
- 렌더링 트리가 그려짐
2. SSR & CSR
- 렌더링을 하는 방식에는 서버 사이드 렌더링과 클라이언트 렌더링이 있다.
- 좀 더 상위 개념으로 MPA와 SPA가 있는데 별도로 공부하시길..
- MPA(Multi Page Application) 서버로부터 HTML을 받아오는, 페이지 전체를 렌더링하는 웹 페이지 구성 방식
- SPA(Single Page Application) 브라우저에 최초로 한번 페이지 전체를 로드하고, 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식
💡 큰 개념에서 MPA는 SSR 방식을 채택하고, SPA는 CSR 방식을 채택한다.
1) SSR (Server Side Rendering)
**SSR(Server Side Rendering)**은 서버쪽에서 렌더링 준비를 끝마친 상태로 즉시 렌더 가능한 HTML 파일을 클라이언트에 전달하는 방식
- 클라이언트 사이드 또는 유니버셜 앱 HTML을 서버를 통해 렌더링
- 서버 사이드 랜더링은 페이지를 이동할 때마다 새로운 페이지를 요청
- 모든 템플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형태로 응답
2) CSR (Client Side Rendering)
CSS는 SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다. 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다. 클라이언트는 그것을 받아 렌더링을 시작
- 문서 자체의 모든 내용이 저장되는 것이 아니라, 자바스크립트를 사용하여 HTML 문서에 렌더링을 진행
- 주로 자바스크립트(DOM)를 사용하여 브라우저에서 렌더링
3. SSR vs CSR
1) SSR의 장단점
- 장점
- SEO(검색 엔진)에 최적화
- SPA(CSR)는 자바스크립트가 실행되지 않는 환경(ex. 검색 엔진 크롤러 봇)에서는 페이지가 제대로 나타나지 않는다.
- 따라서 서버에서 클라이언트 대신 렌더링을 해주면 검색 엔진이 페이지의 내용을 제대로 수집할 수 없다.
- 빠른 초기 페이지 렌더링 (사용자 경험 향상)
- CSR을 사용하면 간혹 자바스크립트가 로딩되고 실행될 때 까지, 사용자가 빈 페이지에서 대기해야할 수 있다. (복잡할 경우)
- 반면 SSR을 구현한 웹 페이지라면, 자바스크립트 파일 다운로드가 완료되지 않은 시점에서도 HTML상에 사용자가 볼 수 있는 콘텐츠가 있기 때문에, 클라이언트의 대기 시간이 최소화된다.
- 단점
- 서버 관리의 어려움
- 서버가 렌더링을 처리하므로 서버 리소스가 사용되고, 갑자기 많은 사용자가 웹 페이지에 접속하면 서버에 과부하가 생길 수 있다.
- 사용자가 많은 서비스라면 캐싱과 로드 밸런싱을 통해 성능을 최적화 해줘야 한다.
- 비효율성
- SSR은 모든 페이지를 다시 요청해야하기 때문에, 전체적인 관점에서 페이지 렌더링이 느리다고 할 수 있다.
- 또한 계속해서 모든 것을 다시 서버에 요청해야하기에 비효율적이다. (중복 요청)
- 이로 인해 새로운 페이지를 이동하면 화면이 깜박인다
- 개발이 복잡해진다
- SSR은 FE와 BE가 밀접하게 연관되어있어서, 커지면 개발이 복잡해질 수 있다.
- 장점
- 사용자 친화적
- 페이지 안에서 컨텐츠를 클릭하여 전환하는 과정에서 링크가 없기 때문에 깜빡임 없이 부드러운 이동이 가능하다.
- 서버 부화 감소
- 필요한 부분만 요청하고 응답하기 때문에 서버의 부화가 감소된다.
- 빠른 속도
- 초기 화면 렌더링 자체는 오래 걸릴 수 있어도, 이후에 모든 작업은 SSR보다 빠르다.
- 단점
- SEO 불리
- 자바스크립트를 하용하여 사용자와 상호작용 후에 페이지 내용이 로드되기 때문에, 그 전에는 내용을 볼 수 없다. (즉 빈페이지)
- 이는 SEO의 불리함과 직결된다.
- 초기 로딩 속도 느림
- 모든 자바스크립트 파일을 다운 받아와야하기 때문에, 초기 로딩 속도가 느리다.
- 대부분의 경우 추가적인 라이브러리를 필요로 함
3. 무엇을 쓰는 것이 좋을까?
👉🏻 서비스, 프로젝트, 컨텐츠의 성격에 따라 달라진다.
- 네트워크가 느릴 때
- SEO가 필요할 때
- 최초 로딩이 빨라야할 때
- 메인스크립트가 클 때
- 상호작용할 것들이 많지 않을 때
👉🏻 SSR
- 네트워크가 빠를 때
- 서버 성능이 좋지 않을 때
- SEO 상관 없을 때
- 메인 스크립트가 가벼울 때
- 데이터 양이 많을 때
- 상호작용할 것이 많을 때
👉🏻 CSR
- 참고자료
https://oneroomtable.tistory.com/entry/서버-사이드-렌더링과-클라이언트-사이드-렌더링이란-무엇인가요
https://nyeongnyeong.tistory.com/183
https://miracleground.tistory.com/165
https://velog.io/@thms200/SPA-vs.-MPA
https://www.bloter.net/newsView/blt201805130001
https://velog.io/@ash3767/서버사이드-렌더링-클라이언트-사이드-렌더링
https://subicura.com/2016/06/20/server-side-rendering-with-react.html