[ FrontEnd ] SSR 이란?

SSR

SSR (서버 사이드 렌더링, Server-Side Rendering)은 웹 애플리케이션의 초기 페이지를 서버에서 렌더링하여 클라이언트에게 전달하는 기술입니다.

이 방식은 클라이언트 사이드 렌더링(CSR)과 대조되는 개념으로, 웹 애플리케이션의 초기 렌더링 작업이 서버에서 수행되기 때문에 초기 페이지 로드 시간이 빠르고, 검색 엔진 최적화(SEO)에 유리합니다.

SSR의 장단점

장점

• 초기 페이지 로드 시간이 빠릅니다
  • 서버에서 렌더링된 완전한 HTML 페이지가 클라이언트에 전달되므로, 사용자는 빠르게 페이지의 내용을 볼 수 있습니다.
• SEO에 유리합니다
  • 완전한 HTML 페이지가 전달되기 때문에 검색 엔진 크롤러가 페이지의 내용을 쉽게 이해하고 색인화할 수 있습니다.
• 클라이언트 리소스 절약
  • 초기 페이지 렌더링에 필요한 계산 작업이 서버에서 처리되므로, 클라이언트의 리소스를 절약할 수 있습니다.

    단점

• 서버 부하 증가
  • 모든 페이지 요청에 대해 서버에서 렌더링 작업이 수행되기 때문에 서버의 부하가 증가합니다. 이로 인해 서버 성능에 영향을 미칠 수 있습니다.
• 개발 복잡도
  • 클라이언트 사이드 렌더링과 서버 사이드 렌더링을 모두 지원하는 웹 애플리케이션 개발은 코드 분리 및 관리, 데이터 동기화 등의 복잡한 작업이 필요할 수 있습니다.

SSR은 JavaScript, React.js, Next.js, Nuxt.js, Gatsby 등의 프레임워크를 사용하여 구현할 수 있으며, 이러한 프레임워크는 웹 애플리케이션 개발 및 배포를 보다 쉽고 빠르게 할 수 있는 도구와 기능을 제공합니다. 어떤 렌더링 방식이 적합한지는 웹 애플리케이션의 요구사항, 사용자 경험, SEO 등의 요소를 고려하여 결정해야 합니다.

순수 JavaScript나 React.js에서 SSR을 구현하는 과정은 복잡하니 Next.js에서 SSR을 구현하는 것이 쉽고, 더 나은 성능을 얻을 수 있습니다