자바스크립트 기반 서버 사이드 렌더링 (SSR)의 기본 개념과 원리
목차
서버 사이드 렌더링(SSR)이란?
자바스크립트 기반 웹 애플리케이션을 개발할 때 클라이언트 사이드 렌더링(Client-side Rendering, CSR) 방식을 사용하는 것이 일반적입니다. 하지만 CSR은 초기 페이지 로딩 속도가 느리고, 검색 엔진 최적화(SEO)에 어려움이 있습니다.
이에 비해 서버 사이드 렌더링(SSR)은 웹 페이지의 초기 렌더링을 서버에서 실행하여 완성된 HTML을 클라이언트에게 제공하는 방식입니다. SSR은 웹 페이지를 서버에서 렌더링하므로 클라이언트에게 전달되는 HTML에는 이미 페이지의 내용이 포함되어 있습니다.
SSR은 사용자가 첫 페이지를 로드할 때 초기 렌더링 속도가 빠르고, 검색 엔진이 페이지의 내용을 잘 수집할 수 있도록 합니다.
SSR의 원리
SSR의 원리는 다음과 같습니다.
- 서버에서 클라이언트 요청을 받게 되면, 서버는 해당 요청에 필요한 데이터를 가져옵니다.
- 서버는 가져온 데이터와 렌더링할 HTML 템플릿을 결합하여 완성된 HTML을 생성합니다.
- 서버는 클라이언트에게 완성된 HTML을 응답으로 전달합니다.
- 클라이언트는 서버로부터 받은 HTML을 렌더링하여 사용자에게 보여줍니다.
- 클라이언트에서 발생하는 이벤트에 대한 처리는 클라이언트의 자바스크립트로 진행됩니다.
위의 과정에서 SSR은 서버 단계에서 초기 렌더링을 수행하므로 성능이 개선되고, 완성된 HTML을 사용자에게 제공하기 때문에 검색 엔진 최적화에 용이합니다.
SSR의 장점
SSR은 다음과 같은 장점을 가집니다.
- 초기 페이지 로딩 속도가 빠르다.
- 검색 엔진 최적화(SEO)에 유리하다.
- 사용자 경험을 향상시킨다.
- 네트워크 요청이 줄어든다.
SSR을 적용하면 사용자는 더 빠르게 페이지를 볼 수 있으며, 검색 엔진은 페이지의 내용을 쉽게 수집할 수 있습니다. 또한 SSR은 SPA(Single Page Application)에서 발생하는 초기 로딩 속도와 네트워크 요청 수를 줄여 사용자 경험을 향상시킵니다.