클라이언트 사이드 렌더링이란?
렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식이다.
최초에 첫 페이지에서 데이터를 모두 불러온 이후에는 페이지 전환을 위한 모든 작업이 자바스크립트와 브러우저의 history.pushState, history.replaceState로 이루어진다. 따라서 페이지를 불러온 이후에는 서버에서 HTML을 내려 받지 않고 하나의 페이지에서 모든 작업을 처리한다.
렌더링에 필요한 <body /> 내부의 내용을 모두 자바스크립트 코드로 삽입한 이후에 렌더링하기 때문이다. 또 페이지 전환 시에도 새로운 HTML 페이지를 요청하는 게 아니라 자바스크립트에서 다음 페이지의 렌더링에 필요한 정보만 HTTP 요청 등으로 가져온 다음, 그 결과를 바탕으로 내부에 DOM을 추가, 수정, 삭제하는 방법으로페이지가 전환된다.
즉, 최초에 서버에서 최소한의 데이터를 불러온 이후부터는 이미 가지고 있는 자바스크립트 리소스와 브라우저 API를 기반으로 모든 작동이 이뤄진다.
장점
한 번 로딩된 이후에는 서버를 거쳐 필요한 리소스를 받아올 일이 적어지기 때문에 사용자에게 훌륭한 UI/UX를 제공한다.
단점
최초에 로딩해야할 자바스크립트 리소스가 커진다.
서버 사이드 렌더링이란?
최초에 사용자에게 보여줄 페이지를 서버에서 렌더링해 빠르게 사용자에게 화면을 제공하는 방식이다. 렌더링에 필요한 작업을 모두 서버에서 수행한다. SPA와의 차이점은 웹페이지 렌더링의 책임을 어디에 두냐이다. 클라이언트 렌더링은 사용자 기기의 성능에 영향을 받지만 서버사이드 렌더링은 서버에서 제공하기 때문에 비교적 안정적인 렌더링이 가능하다.
장점
- 최초 페이지 진입이 비교적 빠르다.
서버에서 HTTP 요청을 받고, HTML을 그린 뒤 바로 화면에 렌더링하기 때문이다.- 검색 엔진과 SNS 공유 등 메타데이터 제공이 쉽다.
- 누적 레이아웃 이동이 적다.
서버에서 HTML을 로딩하기 떄문에 사용자에게 페이지를 보여준 뒤 뒤늦게 HTML 정보가 추가되거나 삭제될 일이 없다.- 사용자의 디바이스 성능에 비교적 자유롭다.
- 보안에 좀 더 안전하다.
민감한 작업을 서버에서 수행하고 그 결과만 브라우저에 제공해 보안 위협을 피할 수있다.
단점
- 소스코드를 작성할 때 항상 서버를 고려해야 한다.
window, sessionStorage와 같이 브라우저에만 있는 전역 객체를 서버 사이드에서 실행되지 않도록 처리해야 한다.- 적절한 서버가 구축돼 있어야 한다.
- 서비스 지연에 따른 문제가 발생할 수 있다.
SEO
- 검색 엔진 로봇이 페이지에 진입
- 페이지가 HTML 정보를 제공해 로봇이 HTML 다운 (자바스크립트는 실행하지 않는다.)
- 다운로드한 HTML 페이지 내부의 오픈그래프, 메타 태그 정보를 기반으로 페이지의 검색 정보를 가져오고 이를 검색엔진에 저장.
SSR은 최초 렌더링 작업이 서버에서 일어나기 때문에 검색 엔진에 제공할 정보를 서버에서 가공해서 HTML 응답으로 제공할 수 있으므로 검색 엔진 최적화에 대응하기 용이하다.
