SSR( Server Side Rendering )
SSR - Server Side Rendering의 약자로 웹 페이지의 랜더링을 서버에서 처리하는 방식입니다.
SSR의 랜더링 방식
SSR의 랜더링 방식은 다음과 같습니다.
1. 클라이언트, 사용자가 서버에 웹 페이지를 요청합니다.
2. 서버는 요청을 받고 필요한 데이터를 수집합니다.
3. html, css, javascript를 사용하여 웹 페이지를 랜더링합니다.
4. 랜더링된 html 페이지를 클라이언트에게 보냅니다.
5. 클라이언트는 받아온 완성된 html을 화면에 표시합니다.
SSR의 장,단점
- 장점
서버 사이드 랜더링은 CSR에 비해 랜더링 속도가 빠릅니다. (이유는 마지막에)
그리고 검색 엔진이 콘텐츠를 쉽게 인덱싱하며, 검색 결과에 표시 될 수 있도록 검색 엔진 최적화가 용이합니다.
- 단점
서버측에서 랜더링을 처리하기 때문에 call이 많아질수록 서버에 많은 부하가 들어갈 수 있습니다.
큰 규모의 앱일경우, SSR은 초기 랜더링 시간이 오래 걸릴 수 있습니다.
SSR은 특히 검색 엔진 최적화가 필요하고 초기 로딩 속도가 중요한 경우에 유용한 렌더링 방식입니다.
CSR ( Client Side Rendering )
CSR- Client Side Rendering의 약자로 웹 페이지의 랜더링을 클라이언트에서 처리하는 방식입니다.
CSR의 랜더링 방식
CSR의 랜더링 방식은 다음과 같습니다.
1. 클라이언트, 사용자가 서버에 웹 페이지를 요청합니다.
2. 웹 서버는 클라이언트 요청의 응답으로 html 파일을 보내줍니다.
3. html을 파싱하여 DOM트리를 생성합니다.
4. DOM트리가 준비되면 html과 css 스타일을 적용하여 초기 레이아웃을 생성합니다.
5. javscript 코드를 실행하여 동적인 기능을 활성화 합니다.
6. 이후 필요의 경우 데이터를 서버와 주고받을 수 있습니다.
CSR 의 장,단점
- 장점
클라이언트 측에서 앱을 실행하기 때문에 랜더링 상호작용이 매끄럽습니다.
빠르게 반응하고 화면 갱신이 부드럽기 때문에 더 좋은 사용자 경험을 얻을 수 있습니다.
클라이언트에서 로직이 실행되기 대문에 서버의 부담이 적습니다. 이는 비용적으로 이득일 수 있습니다.
- 단점
CSR은 검색 엔진에 적합하지 않은 랜더링 방식이기 때문에 SEO에 불리합니다.
클라이언트 측에서 랜더링이 되기 때문에, 클라이언트의 기기 성능에 따라 랜더링 속도의 차이를 보입니다.
javascript의 코드가 클라이언트 랜더링으로 내려오기 때문에 보안 문제에 민감합니다.
더 좋은 사용자 경험을 원한다면 CSR로 구현하는 것도 좋은 방법이라고 생각합니다.
SSR이 CSR에 비해 랜더링 속도가 빠른이유
SSR은 서버에서 HTML을 생성하여 클라이언트에게 제공하기 때문에 초기 페이지 로딩 속도가 빠릅니다
하지만 CSR은 초기 페이지 요청시 리소스를 다운로드 하고 처리하는 과정이 클라이언트 측에서 이루어지고
클라이언트 = 사용자인 입장에서 로딩 속도가 자연스럽게 늦춰 질 수 있는 단점이 있습니다.
본인이 하고자 하는 프로젝트가 검색 엔진에 올라 가야한다 - SSR
더 나은 사용자 경험이 필요하다 - CSR
SSR 기반 프레임워크
크게 Next js, Nuxt js가 존재합니다.
Next는 React기반 Nuxt는 Vue기반입니다.
CSR 프레임워크
여기도 크게 3가지가 있으며,
React, Vue, Angular 가 존재합니다.
글 작성일 기준으로는 Angular는 거의 사장 되었다고 보는 편입니다.
새로이 올라오는 프레임워크는 Svelte 가 있으나만
React 와 Vue의 대규모 커뮤니티에 대항할 수 있을지 의문입니다.