서버 사이드 렌더링(SSR) 이해하기

서론

웹 개발 분야에서 서버 사이드 렌더링(SSR)은 요즘 화두가 되고 있는 중요한 주제다. 흔히들 SSR은 웹 페이지의 초기 로딩 성능을 개선하고, 검색 엔진 최적화(SEO)를 향상하는 데에 큰 도움을 준다고만 알고 있지만 세세히 알아보지 않는다. 때문에 본 포스팅에서는 SSR이 무엇인지, 어떻게 작동하는지, 그리고 어떤 장점이 있는지 알아보자.

 

 

SSR의 기본 개념

SSR(서버 사이드 렌더링, 이하 SSR)은 서버에서 웹 페이지의 전체 HTML을 생성하여 브라우저로 보내는 방식이다. 이 과정에서 서버는 데이터를 가져오고, HTML을 완성하며, 필요한 모든 자바스크립트와 CSS를 포함한 완전한 페이지를 클라이언트에게 전달한다. 

 

더 간략하게 말하면, SSR은 클라이언트(브라우저)에 전달되기 전에 서버에서 웹 페이지의 전체 HTML을 미리 생성하는 프로세스다. 이 방식은 웹 애플리케이션의 초기 로드 시간을 단축시키고 검색 엔진 최적화(SEO)를 개선하는 데 유용하다.

 

 

SSR의 작동 과정

1. 사용자의 요청: 사용자가 웹사이트에 접속하면, 그 요청은 웹 서버로 전송된다.
2. 서버에서의 데이터 처리: 서버는 데이터베이스 조회, API 호출 등을 통해 필요한 데이터를 수집한다. 이 데이터는 웹 페이지를 구성하는 데 사용된다.
3. HTML 렌더링: 서버는 수집한 데이터와 서버의 템플릿 엔진을 사용하여 완성된 HTML 페이지를 생성한다. 이 과정에서 자바스크립트, CSS, 이미지 등의 리소스도 포함될 수 있다.
4. 클라이언트로의 응답 전송: 생성된 HTML 페이지는 HTTP 응답의 일부로 클라이언트(브라우저)에게 전송된다.
5. 브라우저에서의 렌더링: 클라이언트는 받은 HTML을 렌더링하여 사용자에게 보여준다. 이때 추가적인 자바스크립트가 실행되어 페이지가 동적으로 작동할 수 있다

 

 

SSR의 주요 장점 및 고려해야 할 단점

주요 장점으로는 사용자가 서버로부터 완성된 페이지를 받기 때문에, 초기 로딩 시간이 단축된다. 특히 이 강점은 느린 인터넷 환경에서 유리하다. 그리고  검색 엔진 크롤러는 완성된 HTML을 더 잘 이해하고 인덱싱할 수 있다. 따라서 SSR은 웹 페이지의 검색 엔진 순위를 개선하는 데 도움이 된다. 또한 완성된 HTML을 제공하기 때문에, 자바스크립트를 실행할 수 없는 환경에서도 웹 페이지의 기본적인 내용을 볼 수 있다.

고려해야 할 단점으로는 모든 페이지 요청에 대해 서버에서 렌더링을 처리해야 하므로, 서버에 높은 부하가 발생할 수 있다. 그리고 클라이언트 사이드 렌더링(CSR)에 비해 개발 과정이 복잡할 수 있으며, 서버와 클라이언트 간의 코드 공유에 대한 추가적인 고려가 필요하다.

 

 

SSR에 특화된 기술들

SSR에 특화되어있는 라이브러리, 프레임워크들이 화두가 되고 있다. 웹 애플리케이션의 성능과 SEO를 개선하는 데 효과적이고, javasript를 기반으로 하기 때문에 진입 장벽이 쉽기 때문이다. 몇 가지 주요 예시와 그 사용 방법을 간단하게 소개해보겠다.

 

첫 번째로 Node.js가 있다. Node.js는 JavaScript를 서버 사이드에서 실행할 수 있게 해주는 런타임 환경이다. 전통적으로 브라우저에서만 사용되던 JavaScript를 서버에서도 실행할 수 있게 하여, SSR을 가능하게 만든다. Express.js와 같은 프레임워크와 함께 사용하여, 서버에서 HTML을 생성하고 클라이언트에 전송한다.

 

두 번째로 말하는 Next.js는 React 기반의 프레임워크로, SSR을 지원한다. 클라이언트 사이드 렌더링과 SSR을 모두 지원하여, 개발자가 필요에 따라 선택할 수 있다. 최근에 많은 버전업을 하면서, 사용법이 많이 바뀌고 있지만 getServerSideProps() 함수를 사용하여 서버 사이드에서 데이터를 가져오고, 페이지를 렌더링 하여 SEO 최적화 및 초기 페이지 로딩 시간 단축을 가능하게 한다.

세 번째는 Nuxt.js, Vue.js 기반의 프레임워크인 Nuxt.js는 자동화된 SSR과 정적 사이트 생성을 지원한다. Nuxt.js를 사용하면 Vue.js 애플리케이션을 쉽게 서버 사이드 렌더링할 수 있다.

 

 

결론

SSR은 웹 애플리케이션의 성능과 접근성을 향상시키는 중요한 기술이다. 그러나 이를 효과적으로 구현하려면 서버 부담, 개발 복잡성, 캐싱 전략과 같은 요소를 잘 고려해야 한다. 현대 프레임워크의 도움으로 SSR을 더 쉽고 효율적으로 구현할 수 있으며, 이를 통해 웹 애플리케이션의 경쟁력을 한층 더 강화할 수 있고, 그렇기 때문에 우리는 이러한 프레임워크를 공부하고 학습해야 한다.