서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)은 웹 애플리케이션의 렌더링 방식을 결정짓는 중요한 개념이다. 각 방식은 페이지 로드 속도, SEO(검색 엔진에서 웹사이트가 더 잘 보이도록 최적화하는 작업), 사용자 경험 등에 큰 영향을 미치므로 어떤 방식이 적합한지에 따라 선택할 필요가 있다.
SSR (Server-Side Rendering)
SSR은 웹 애플리케이션의 초기 HTML 페이지를 서버에서 미리 렌더링하여 클라이언트에 전달하는 방식이다. 서버가 HTML을 렌더링해 클라이언트로 전송하고, 클라이언트는 받은 HTML을 브라우저에 바로 렌더링해 사용자에게 보여준다. 전통적인 웹 애플리케이션에 많이 쓰인다.
장점
빠른 초기 로딩 속도: SSR은 초기 HTML이 이미 서버에서 렌더링된 상태로 전달되므로 초기 페이지 로딩 속도가 빠르다.
SEO에 유리: HTML 콘텐츠가 서버에서 렌더링되기 때문에 검색 엔진이 크롤링하기 쉬워 SEO에 유리하다.
빠른 초기 사용자 경험: 사용자가 웹사이트에 처음 접근할 때, 서버가 HTML을 즉시 제공하기 때문에 초기 화면이 빠르게 보인다.
단점
서버 부하: 서버가 모든 HTML을 생성해야 하기 때문에 서버에 부하가 걸릴 수 있다. 특히 트래픽이 많은 경우 성능 저하가 발생할 수 있다.
상호작용이 필요한 경우: 서버에서 렌더링된 HTML만 제공되므로 클라이언트에서 추가로 JavaScript로 처리해야 할 인터랙션에 대해서는 별도의 로딩 시간이 필요하다.
CSR (Client-Side Rendering)
CSR은 서버에서 간단한 HTML을 전달한 후 클라이언트(브라우저)에서 JavaScript를 통해 렌더링을 진행하는 방식이다. 보통 React, Vue.js와 같은 JavaScript 프레임워크에서 많이 사용된다. 이 방식은 초기에는 간단한 HTML과 스크립트를 전달하지만, 클라이언트 측에서 JavaScript가 실행되면서 전체 애플리케이션이 완성된다.
장점
서버 부하 감소: CSR은 클라이언트에서 대부분의 렌더링을 처리하므로 서버 부하가 적다.
빠른 페이지 전환: 클라이언트가 한 번 애플리케이션을 로드한 후에는 페이지 간 전환이 빠르다. CSR 프레임워크는 주로 SPA(Single Page Application)에서 사용되기 때문에 전체 애플리케이션을 다시 로드할 필요가 없다.
향상된 사용자 상호작용: 클라이언트 측에서 바로 렌더링 및 업데이트가 가능하여 동적인 사용자 경험 제공이 용이하다.
단점
초기 로딩 속도 지연: 초기 로드 시 JavaScript가 다운로드되고 실행되기까지 시간이 걸리므로 초기 로딩 속도가 느릴 수 있다.
SEO 한계: CSR은 검색 엔진이 JavaScript를 실행하여 콘텐츠를 크롤링해야 하는 경우가 많기 때문에 SEO에 불리할 수 있다.
느린 첫 화면 렌더링: HTML과 JavaScript가 로딩될 때까지 빈 페이지 상태일 수 있어, 첫 화면 렌더링이 느릴 수 있다.
이렇듯 각각의 장단점이 존재하므로, 어떤 상황에서 적합한지를 고민해봐야한다.
SSR이 적합한 경우?
SEO가 중요한 웹사이트: 검색 엔진 최적화(SEO)가 필요한 뉴스 사이트나 블로그와 같은 콘텐츠 중심의 웹사이트는 SSR이 적합하다.
빠른 초기 렌더링이 필요한 경우: 초기 로딩 속도가 중요한 웹페이지에서 사용된다. 예를 들어, 사용자가 빠르게 접속해야 하는 포털 사이트나 전자상거래 사이트의 첫 페이지에서 SSR을 많이 사용한다.
다양한 기기에서의 접근이 예상되는 경우: 초기 화면을 빠르게 제공해주어야 하며, 사용자가 이동 중이거나 모바일 환경에서 접속할 경우에도 안정적인 경험을 제공할 수 있다.
CSR이 적합한 경우?
동적 상호작용이 많은 애플리케이션: 사용자가 여러 가지 상호작용을 할 수 있는 애플리케이션, 예를 들어 대시보드나 관리 도구 같은 경우에는 CSR이 적합하다.
SPA(Single Page Application): 사용자 경험에 중점을 둔 애플리케이션에서 페이지 이동 없이 데이터를 불러와야 하는 경우에는 CSR이 효과적이다. 예를 들어, 대화형 웹 애플리케이션이나 게임에서는 CSR의 장점이 돋보인다.
로그인 기반 웹 애플리케이션: 사용자 별로 고유한 데이터를 제공해야 하는 경우 CSR이 유리하다. 특히 사용자의 요청에 따라 데이터를 동적으로 가져오는 기능이 필요한 경우에는 CSR이 적합하다.
각 렌더링 방식의 장단점에 대해 정확히 모르고 사용했어서 효율적으로 설계하지 못 한 지난날들이 아쉽지만, 앞으로라도 제대로 알고 사용하면 좋을 것 같아 정리해 봤다.
