서버 사이드 렌더링이란? (SSR / Server Side Rendering)
들어가며 ..
MPA와 SPA
먼저 , 클라이언트와 서버 간의 통신에서 웹 서버가 HTML을 반환하는 프로세스는 다음과 같이 요약할 수 있다.
기본적인 정적 페이지는 단순하게 HTML,CSS,JavaScript로 구성되어 있지만, 동적 페이지는 사용자의 비동기 요청을 실시간으로 처리하는 상호작용을 포함한다. 따라서 일반적인 웹 사이트의 경우 사용자가 클릭하거나 서버로 요청을 보내면 짧은 시간동안 빈 페이지를 표시하고 서버는 요청에 대한 응답으로 새로운 정적 페이지를 반환한다. 이러한 종류의 응용 프로그램을 MPA(Multiple Page Application) 라고 한다.
반면에 React나 Vue에서 사용하는 웹 페이지는 SPA(Single Page Application)라는 테마로 구성되어 있다.
사용자의 요청마다 새로운 정적 페이지를 받는 대신, 한 페이지내에서 필요한 부분만을 재 렌더링하는 방식으로 동작한다.
클라이언트사이드렌더링(CSR)과 서버사이드렌더링(SSR)
MPA와 SPA에서 각자 HTML을 그려내기 위한 전략이다.
기존 웹 페이지 방식의 MPA에서는 SSR을, React와 Vue등의 SPA에서는 CSR을 사용한다.
MPA에서는 서버에는 이미 모든 하드 코딩된 정적 페이지가 있다. 특정 요청 시 서버는 요청과 함께 해당 페이지를 반환한다. 이는 렌더링이 서버 측에서 이미 완료되었고 클라이언트 측이 해당 페이지를 표시하는 원리로 동작한다.
SPA에서는 초기 요청시, 텅 빈 HTML 문서를 반환한다. 빈 HTML 문서가 있으면 클라이언트는 서버에 요청을 보내고 서버는 js 파일과 같은 클라이언트 측 렌더링에 필요한 파일을 반환한다. 그런 다음 브라우저는 완전한 새 페이지를 렌더링하는 대신 수신된 js 파일과 데이터를 현재 HTML에 연결하는 방식으로 동작한다.
즉 SPA환경에서의 SSR이란,
서버에서 페이지를 그려(Render) 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법이다.
서버사이드렌더링의 장점
1. 빠른 페이지 렌더링
클라이언트 사이드 렌더링보다 (Client Side Rendering) 속도가 빠르다.
CSR의 경우, 모든 js파일을 로드하고 브라우저에서 화면을 그리는 시간동안 사용자는 빈 HTML화면만 보게 된다.
그러나 SSR의 경우, 서버에서 미리 화면을 그려서 브라우저로 보내주기 때문에 페이지를 그리는 시간을 단축할 수 있다.
2. 검색엔진최적화 (SEO, Search Engine Optimization)
CSR의 경우, js가 로드 되지 않은 경우 아무런 정보를 보이지 않는다. Googlebot 검색엔진이 자바스크립트가 로드 되지 않은 페이지를 스캔함으로 인해 아무런 페이지도 노출이 되지 않는다.
그러나 SSR의 경우, SNS에서 링크를 공유했을 때 해당 웹 사이트의 정보를 이미지와 설명으로 표시해주는 OG(Open Graph) Tag를 페이지 별로 적용하여 SEO에 최적화가 가능하다.
참고 :
https://jgam.medium.com/csr-client-side-rendering-and-ssr-server-side-rendering-bc93ecca32c5