1. CSR (Client-Side Rendering)
개념:
Client-Side Rendering은 웹 페이지의 콘텐츠가 클라이언트(즉, 사용자의 브라우저)에서 렌더링되는 방식이다. 서버는 기본 HTML 파일만 제공하고, 주요 콘텐츠는 클라이언트에서 자바스크립트를 통해 동적으로 생성된다.
작동 방식:
- 초기 요청:
- 사용자가 웹사이트를 방문하면, 서버는 최소한의 HTML 페이지와 관련된 자바스크립트 파일을 클라이언트에게 전달한다. 이 HTML 파일은 일반적으로 거의 비어있고, 기본적인 구조만 포함되어 있다.
- 자바스크립트 로딩:
- 브라우저는 HTML을 로드한 후, 자바스크립트 파일을 다운로드하여 실행한다. 이 자바스크립트는 웹 애플리케이션의 프레임워크(예: React, Vue.js, Angular 등)에 의해 동작하며, 이후 서버로부터 필요한 데이터를 가져온다.
- 데이터 페칭 및 렌더링:
- 자바스크립트가 서버에서 데이터를 가져온 후, 이 데이터를 바탕으로 클라이언트에서 DOM(Document Object Model)을 생성하여 페이지 콘텐츠를 렌더링한다. 이로 인해 사용자는 페이지를 볼 수 있게 된다.
- 사용자 인터랙션:
- 이후의 모든 페이지 전환이나 사용자 상호작용은 클라이언트 측에서 처리되며, 전체 페이지를 다시 로드할 필요 없이 필요한 부분만 업데이트 된다.
장점:
- 빠른 사용자 경험: 초기 로딩 이후에는 페이지 전환이 매우 빠르고 부드럽다. 페이지를 다시 로드할 필요 없이 필요한 데이터만 갱신하기 때문에 사용자 경험이 크게 향상된다.
- 서버 부하 감소: 대부분의 로직이 클라이언트 측에서 수행되기 때문에 서버의 부하가 줄어든다. 서버는 데이터를 API로 제공하는 역할만 수행한다.
- 개발자 생산성: CSR은 최신 프론트엔드 프레임워크와 라이브러리와 잘 맞으며, 재사용 가능한 컴포넌트를 쉽게 관리할 수 있다.
단점:
- 초기 로딩 지연: 초기 로딩 시, 필요한 자바스크립트 파일이 클수록 사용자는 빈 화면을 더 오랫동안 보게 된다. 이는 초기 경험을 저하시킬 수 있다.
- SEO 문제: 검색 엔진은 자바스크립트를 실행하지 않기 때문에, 클라이언트에서 동적으로 생성되는 콘텐츠를 인덱싱하기 어려워 SEO에 불리할 수 있다. 그러나 이 문제는 서버에서 자바스크립트를 실행하여 HTML을 생성해주는 "프리렌더링"이나 "정적 사이트 생성" 같은 기법으로 해결할 수 있다.
- 브라우저 의존성: 클라이언트 측 자바스크립트에 강하게 의존하기 때문에, 자바스크립트를 비활성화한 브라우저에서는 웹사이트가 제대로 작동하지 않을 수 있다.
사용 사례:
- 대규모 SPA: 사용자가 자주 상호작용하는 복잡한 싱글 페이지 애플리케이션(SPA)에서는 CSR이 적합하다. 예를 들어, 이메일 클라이언트, 대시보드 애플리케이션, 소셜 미디어 사이트 등이 이에 해당한다.
2. SSR (Server-Side Rendering)
개념:
Server-Side Rendering은 웹 페이지의 콘텐츠가 서버에서 렌더링되어 완전한 HTML 파일로 사용자에게 전달되는 방식이다. 브라우저가 HTML 파일을 받으면, 즉시 페이지 콘텐츠를 표시할 수 있다.
작동 방식:
- 초기 요청:
- 사용자가 웹사이트를 방문하면, 서버는 해당 요청을 처리하고, 필요한 데이터와 함께 완전히 렌더링된 HTML 파일을 생성하여 클라이언트에게 전송한다.
- HTML 전송 및 렌더링:
- 브라우저는 서버에서 전송된 HTML 파일을 수신하고, 이를 즉시 렌더링하여 사용자에게 표시한다. 이 단계에서는 자바스크립트의 실행 없이도 콘텐츠가 바로 나타난다.
- 자바스크립트 로딩:
- 이후 자바스크립트 파일이 로드되면서, 클라이언트 측에서 추가적인 동작(예: 사용자 인터랙션 처리, 애니메이션 적용 등)을 처리한다. 이 과정을 "하이드레이션(hydration)"이라고 하며, 서버에서 렌더링된 HTML과 클라이언트 측 자바스크립트가 결합된다.
- 사용자 인터랙션:
- 사용자 인터랙션은 이후 클라이언트 측에서 처리되며, 필요한 경우 서버로부터 추가 데이터를 가져와 페이지를 업데이트할 수 있다.
장점:
- SEO 최적화: 서버에서 완전한 HTML이 생성되므로, 검색 엔진 크롤러가 콘텐츠를 쉽게 인덱싱할 수 있다. 이는 검색 순위 개선에 유리하다.
- 빠른 초기 렌더링: 초기 요청 시, 사용자는 서버에서 렌더링된 완전한 페이지를 즉시 볼 수 있으므로, 빈 화면 없이 빠른 초기 로딩을 경험할 수 있다.
- 브라우저 호환성: 자바스크립트가 비활성화된 브라우저에서도 기본 HTML이 표시되므로, 다양한 환경에서 사이트가 작동할 수 있다.
단점:
- 서버 부하 증가: 서버에서 매번 페이지를 렌더링해야 하므로, 동시 접속자가 많을 경우 서버에 큰 부하가 발생할 수 있다. 특히 복잡한 페이지일수록 렌더링 비용이 증가한다.
- 페이지 전환 속도: 각 페이지 전환 시마다 서버 요청이 발생하고 새로운 HTML 파일이 전송되므로, 클라이언트 측에서 전환 속도가 느려질 수 있다.
- 복잡한 상태 관리: 클라이언트와 서버 간의 상태를 일관성 있게 유지하는 것이 어렵고, 복잡한 동적 데이터의 경우 관리가 까다로울 수 있다.
사용 사례:
- 콘텐츠 중심 사이트: 블로그, 뉴스 웹사이트, 마케팅 페이지 등 SEO가 중요한 웹사이트에서는 SSR이 적합하다. 또한 초기 로딩 속도가 중요한 상황에서도 SSR이 유리하다.
결론
CSR과 SSR은 각기 다른 목적과 특성을 가지고 있으며, 웹 애플리케이션의 요구 사항에 따라 선택이 달라진다. CSR은 복잡하고 동적인 사용자 인터페이스를 필요로 하는 애플리케이션에서 유리하며, SSR은 SEO와 초기 로딩 속도가 중요한 경우에 적합하다. 최근에는 두 방식을 결합한 하이브리드 접근법(예: Next.js)도 많이 사용되며, 각 방식의 장점을 최대한 활용하려는 노력이 이어지고 있다.
Share article