CSR (Client-Side Rendering)
전통적으로, 웹 페이지는 서버에서 렌더링된 HTML을 클라이언트(사용자의 브라우저)로 전송하는 방식으로 제공되었습니다. 하지만, 사용자가 웹 애플리케이션과 더 인터랙티브하게 상호작용하기를 원하게 되면서, 클라이언트 사이드에서 실행되는 JavaScript 기반의 웹 애플리케이션이 인기를 얻게 되었습니다. 이를 위해 CSR이 도입되었습니다.
특징
- 렌더링 위치: 모든 렌더링이 클라이언트(브라우저)에서 이루어집니다.
- 초기 로딩 속도: 초기 로딩이 느릴 수 있습니다. 서버에서 빈 HTML 페이지를 보내고, JavaScript 파일이 로드된 후 데이터가 로드되며 화면이 렌더링됩니다.
- 동적 콘텐츠: 페이지 전환이나 사용자 상호작용이 빠르고, 실시간 데이터 변경에 유리합니다.
- SEO: 검색 엔진이 JavaScript 실행 전 빈 HTML 페이지를 크롤링할 수 있어 SEO에 불리할 수 있습니다. 하지만 최신 검색 엔진들은 일부 CSR도 처리할 수 있습니다.
SEO(Search Engine Optimization)는 웹사이트가 검색 엔진 결과 페이지에서 더 높은 순위에 오르도록 최적화하는 과정입니다. SEO는 웹사이트의 가시성을 높여 더 많은 트래픽을 유도하고, 궁극적으로 비즈니스 목표를 달성하는 데 도움을 줍니다.
사용 상황
사용자가 자주 상호작용하는 애플리케이션, 예를 들어 대화형 웹 애플리케이션(예: Gmail)이나 싱글 페이지 애플리케이션(SPA)에서 많이 사용됩니다.
SEO가 중요하지 않거나, 별도의 SEO 대응이 가능할 때 적합합니다.
장점
- 빠른 사용자 상호작용: 페이지 전환이나 사용자 상호작용이 매우 빠르며, 매끄러운 사용자 경험을 제공합니다.
- 유연성: 클라이언트 측에서 모든 렌더링을 제어할 수 있어, 복잡하고 동적인 웹 애플리케이션에 적합합니다.
- 저장된 상태 유지: SPA (Single Page Application) 형태로 동작하여, 페이지 이동 시에도 애플리케이션의 상태를 유지할 수 있습니다.
단점
- 초기 로딩 속도 저하: 브라우저가 초기 로딩 시 전체 JavaScript를 다운로드하고 실행해야 하므로, 초기 로딩이 느릴 수 있습니다.
- SEO 문제: 검색 엔진이 JavaScript 실행 전의 빈 HTML을 크롤링할 경우 SEO가 어려울 수 있습니다. 이는 일부 검색 엔진이나 환경에서는 치명적일 수 있습니다.
- 브라우저 의존성: 브라우저에서 JavaScript 실행에 많은 리소스를 사용하므로, 저사양 기기에서는 성능이 저하될 수 있습니다.
예시: React.js 기반의 싱글 페이지 애플리케이션 (SPA)
CSR은 보통 React, Angular, Vue.js와 같은 JavaScript 프레임워크를 사용하여 개발된 애플리케이션에서 사용됩니다. 예를 들어, Facebook과 Gmail 같은 웹 애플리케이션은 CSR을 활용하여 사용자의 상호작용에 빠르게 반응합니다. 이러한 애플리케이션들은 서버로부터 데이터만 받아오고, 모든 렌더링을 클라이언트 측에서 수행합니다.
SSR (Server-Side Rendering)
CSR의 한계, 특히 초기 로딩 시간 지연과 SEO 문제를 해결하기 위해 SSR이 다시 부각되었습니다. 전통적인 방식인 SSR은 이 문제들을 해결하면서도 현대적인 웹 애플리케이션의 요구사항을 충족시킬 수 있도록 개선되었습니다.
특징
- 렌더링 위치: 서버에서 HTML을 렌더링하여 클라이언트에 전달합니다.
- 초기 로딩 속도: 초기 로딩이 빠릅니다. 서버에서 완전히 렌더링된 HTML이 전달되므로 브라우저는 바로 렌더링을 시작할 수 있습니다.
- SEO: 서버에서 완전히 렌더링된 HTML을 제공하므로 SEO에 매우 유리합니다.
- 데이터 유효성: 사용자에게 최신 데이터를 제공할 수 있습니다.
사용 상황
SEO가 중요한 웹사이트(예: 블로그, 뉴스 사이트)에서 사용됩니다.
콘텐츠가 자주 변경되며, 사용자가 최신 정보를 빠르게 확인할 필요가 있는 경우 또는 초기 로딩 성능이 중요한 상황에 적합합니다.
장점
- 빠른 초기 로딩: 서버에서 미리 렌더링된 HTML을 전달하므로, 클라이언트에서 초기 로딩 시간이 짧아집니다.
- SEO 친화적: 검색 엔진이 완전히 렌더링된 페이지를 크롤링할 수 있어, SEO에 유리합니다.
- 최신 데이터 제공: 서버에서 매 요청마다 페이지를 렌더링하므로, 최신 데이터를 사용자에게 제공합니다.
단점
- 서버 부하: 서버에서 모든 요청에 대해 페이지를 렌더링해야 하므로, 트래픽이 많아지면 서버 부하가 증가할 수 있습니다.
- 구현 복잡성: 클라이언트와 서버 양쪽에서 상태를 관리해야 하므로, 구현이 복잡해질 수 있습니다.
- 지속적인 서버 비용: 매 요청마다 서버에서 렌더링하므로, 서버 운영 비용이 증가할 수 있습니다.
예시: Next.js를 사용하는 블로그 또는 e커머스 사이트
설명: SSR은 주로 Next.js, Nuxt.js (Vue.js 기반)와 같은 프레임워크에서 사용됩니다. 예를 들어, Netflix나 Shopify의 일부 페이지는 SSR을 통해 서버에서 HTML을 생성하여 클라이언트에 전달합니다.
SSG (Static Site Generation)
정적인 콘텐츠가 많은 사이트는 SSR이나 CSR보다 성능이 더 뛰어날 수 있습니다. 이를 위해 정적 사이트 생성(SSG)이 각광받기 시작했습니다. 특히, JAMstack과 같은 모던 웹 개발 접근법이 등장하면서 SSG의 인기가 높아졌습니다.
특징
1.빌드 타임에 미리 모든 페이지를 정적으로 생성하여 배포하는 방식입니다.
2. 서버가 페이지를 요청받을 때마다 렌더링하지 않고, 이미 생성된 정적 파일을 클라이언트에 전송합니다.
사용 상황
블로그, 문서 사이트 등 정적 콘텐츠가 많은 사이트에 적합합니다.
장점
- 매우 빠른 페이지 로딩 속도, 서버에 부담이 거의 없습니다.
- SEO에 유리하며, CDN(콘텐츠 전송 네트워크)을 통해 쉽게 캐싱할 수 있습니다.
- 유지보수가 간단하고, 보안성이 높습니다.
단점
- 콘텐츠가 자주 변경되는 사이트에 적합하지 않음. 빌드 타임이 길어질 수 있습니다.
- 동적 콘텐츠 처리가 어렵고, 자주 업데이트되는 페이지는 비효율적일 수 있습니다.
요약
이 세가지 개념을 요약하며 포스팅을 마무리하겠습니다.
CSR은 클라이언트에서 페이지를 렌더링하는 방식으로, 인터랙티브한 웹 애플리케이션에 적합하지만, 초기 로딩이 느리고 SEO에 불리할 수 있습니다.
SSR은 서버에서 페이지를 렌더링해 클라이언트에 전송하는 방식으로, 빠른 로딩과 SEO에 유리하지만 서버 부하가 커질 수 있습니다.
SSG는 빌드 타임에 정적 페이지를 미리 생성해 배포하는 방식으로, 정적 콘텐츠에 적합하고 성능이 뛰어나지만 동적 콘텐츠 처리에는 제한이 있습니다.
