서버 사이드 렌더링(Server-side rendering, SSR)은 웹 애플리케이션의 초기 로드 속도 및 SEO 최적화를 향상시키기 위한 기술입니다. 기존에는 클라이언트 사이드 렌더링(Client-side rendering, CSR) 방식으로 동작하던 웹 애플리케이션에서 SSR을 적용하면 서버에서 초기 HTML 마크업을 생성하고 반환하는 방식으로 동작합니다. 이렇게 함으로써 사용자는 초기 HTML을 빠르게 로드하고, 검색 엔진은 페이지의 내용을 수집할 수 있게 됩니다.
SSR을 위해서는 서버 측에서 JavaScript를 실행할 수 있어야 합니다. 이를 위해 Node.js 환경을 사용하여 서버 사이드에서 JavaScript 코드를 실행합니다. Node.js는 V8 JavaScript 엔진을 사용하여 JavaScript 코드를 빠르게 실행할 수 있도록 지원하며, 이를 통해 서버 사이드에서도 동적인 HTML 마크업을 생성할 수 있습니다.
서버 측에서 JavaScript를 실행하기 위해서는 SSR 프레임워크 또는 라이브러리를 사용할 수 있습니다. React의 경우 Next.js, Angular의 경우 Universal Angular 등의 SSR 프레임워크를 사용하여 쉽게 SSR을 적용할 수 있습니다. 또한, Express와 같은 Node.js 웹 프레임워크를 사용하여 SSR을 구현할 수도 있습니다.
SSR의 주요 이점은 초기 로딩 속도의 향상과 SEO 최적화입니다. CSR 방식에서는 JavaScript 파일이 로드되고 실행되어야만 동적인 콘텐츠가 렌더링되므로 초기 로딩 시간이 늘어날 수 있습니다. 또한, 검색 엔진은 CSR 방식에서는 JavaScript를 실행하지 않으므로 페이지의 실제 내용을 수집하지 못하는 경우가 발생할 수 있습니다. 하지만 SSR을 적용하면 초기 로딩 속도가 향상되고, 검색 엔진은 정적인 HTML을 수집하여 페이지의 내용을 파악할 수 있게 됩니다.
이러한 이유로 SSR은 웹 애플리케이션의 성능 및 검색 엔진 최적화에 매우 중요한 역할을 합니다. 따라서 SSR을 고려하여 웹 애플리케이션을 개발할 때, JavaScript를 서버 측에서 실행할 수 있도록 설계하는 것이 좋습니다.
참고 자료: