CSR (Client-side Rendering)

웹 애플리케이션에서 클라이언트 측, 즉 사용자의 웹 브라우저에서 JavaScript를 사용하여 웹 페이지를 렌더링하는 방식.
이 방식은 최근 JavaScript 라이브러리와 프레임워크의 발전으로 인해 널리 사용되고 있다.

작동 방식

  1. 사용자가 웹사이트에 접속하면 브라우저가 서버에 콘텐츠를 요청한다.
  2. 서버는 최소한의 HTML 구조와 JavaScript 파일 링크만 포함된 기본적인 HTML 문서를 응답으로 전송한다.
  3. 브라우저는 이 HTML을 받아 빈 페이지를 먼저 표시한다.
  4. 브라우저가 연결된 JavaScript 파일을 다운로드하고 실행한다.
  5. JavaScript 코드가 실행되면서 동적으로 페이지 콘텐츠를 생성하고 DOM을 조작하여 사용자에게 최종 화면을 보여준다.

장점

  1. 부드러운 사용자 경험: 페이지 전환 시 전체 페이지를 새로 로드하지 않고 필요한 부분만 업데이트하므로 화면 깜빡임이 없고 더 부드러운 사용자 경험을 제공한다.
  2. 서버 부하 감소: 초기 로딩 이후에는 필요한 데이터만 요청하므로 서버의 부하가 줄어든다.
  3. 빠른 인터랙션: 클라이언트 측에서 대부분의 로직을 처리하므로 사용자 입력에 대한 반응이 빠르다.
  4. 프론트엔드와 백엔드의 분리: 개발 과정에서 프론트엔드와 백엔드를 완전히 분리할 수 있어 개발 효율성이 높아진다.

단점

  1. 초기 로딩 속도: JavaScript 파일을 다운로드하고 실행하는 데 시간이 걸리므로 초기 페이지 로딩 속도가 느릴 수 있다.
  2. SEO 문제: 검색 엔진 크롤러가 JavaScript로 생성된 콘텐츠를 제대로 인식하지 못할 수 있어 검색 엔진 최적화(SEO)에 불리할 수 있다.
  3. 브라우저 호환성: 오래된 브라우저나 JavaScript가 비활성화된 환경에서는 제대로 작동하지 않을 수 있다.

적용 사례

CSR은 주로 단일 페이지 애플리케이션(SPA)에서 사용된다.
React, Vue.js, Angular 등의 프레임워크를 사용하여 구현되며, 동적이고 인터랙티브한 웹 애플리케이션에 적합하다.
예를 들어, 소셜 미디어 플랫폼, 온라인 메신저, 대시보드 등 사용자와의 상호작용이 많고 실시간 업데이트가 필요한 애플리케이션에서 CSR이 효과적으로 사용된다.
CSR은 현대적인 웹 개발에서 중요한 렌더링 방식 중 하나로, 프로젝트의 요구사항과 특성에 따라 서버 사이드 렌더링(SSR)과 적절히 선택하여 사용해야 한다.

최적화 전략

  1. 코드 스플리팅:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// React.lazy를 사용한 동적 임포트
const ProductDetail = React.lazy(() => import('./ProductDetail'));

function App() {
    return (
        <Suspense fallback={<LoadingSpinner />}>
            <ProductDetail />
        </Suspense>
    );
}
  1. 프리로딩:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// 링크에 마우스를 올렸을 때 미리 컴포넌트 로드
function ProductList({ products }) {
    const prefetchProductDetail = () => {
        const ProductDetail = import('./ProductDetail');
    };

    return (
        <div>
            {products.map(product => (
                <div onMouseEnter={prefetchProductDetail}>
                    <h2>{product.name}</h2>
                </div>
            ))}
        </div>
    );
}

참고 및 출처