CSR (Client-Side Rendering) vs SSR (Server-Side Rendering)

 

1. CSR (Client-Side Rendering)

정의

• 렌더링이 클라이언트(브라우저)에서 이루어지는 방식.
• 서버는 빈 HTML 파일과 필요한 JavaScript 파일을 전달하고, 브라우저가 JavaScript를 실행하여 DOM을 생성하고 콘텐츠를 렌더링합니다.

작동 방식

1. 서버에서 초기 HTML 파일을 전송.
2. 브라우저가 HTML 파일을 파싱하고, JavaScript 파일을 요청하여 다운로드 및 실행.
3. JavaScript가 실행되며 DOM이 생성되고, 최종적으로 화면에 콘텐츠가 표시.

특징

• SPA(Single Page Application)에서 주로 사용.
• React, Vue.js, Angular와 같은 프론트엔드 프레임워크에서 일반적으로 CSR 방식을 사용.

장점

1. 인터랙티브한 사용자 경험:
   • 페이지 간 전환이 빠르고 부드러움(클라이언트에서 처리).
2. 초기 로딩 이후 빠른 속도:
   • 필요한 부분만 업데이트되므로 효율적.
3. 백엔드 부담 감소:
   • 서버는 데이터를 제공만 하면 되고, 렌더링은 클라이언트에서 수행.

단점

1. SEO에 불리:
   • 초기 HTML은 비어 있고, JavaScript 실행 후 콘텐츠가 생성되므로, 일부 검색 엔진에서 제대로 크롤링되지 않을 수 있음.
2. 초기 로딩 시간 증가:
   • 브라우저가 JavaScript를 다운로드하고 실행하는 데 시간이 소요.
3. JS 비활성화 시 기능 제한:
   • JavaScript가 비활성화된 환경에서는 애플리케이션이 작동하지 않을 수 있음.

---

2. SSR (Server-Side Rendering)

정의

• 렌더링이 서버에서 이루어지는 방식.
• 서버가 완전히 렌더링된 HTML을 클라이언트로 전송하며, 클라이언트는 이를 브라우저에 표시합니다.

작동 방식

1. 클라이언트가 서버에 요청을 전송.
2. 서버가 요청을 처리하고, HTML을 렌더링하여 클라이언트에 반환.
3. 브라우저가 HTML을 렌더링하고 사용자에게 콘텐츠를 표시.

특징

• 전통적인 웹 애플리케이션 방식이며, 현대 프레임워크에서도 지원 가능(Next.js, Nuxt.js).

장점

1. SEO 친화적:
   • 완전히 렌더링된 HTML이 검색 엔진에 바로 전달되므로 크롤링 및 색인에 유리.
2. 빠른 초기 렌더링:
   • 콘텐츠가 서버에서 렌더링되므로 사용자는 빠르게 콘텐츠를 볼 수 있음.
3. JavaScript 비활성화 대응 가능:
   • 브라우저에서 JavaScript가 꺼져 있어도 기본 HTML이 표시됨.

단점

1. 서버 부담 증가:
   • 모든 요청에 대해 서버에서 HTML을 생성해야 하므로 부하가 증가.
2. 상호작용 속도 감소:
   • 새로운 페이지 요청 시마다 전체 HTML을 서버에서 다시 받아야 하므로 느릴 수 있음.
3. 복잡한 구현:
   • 초기 설정과 데이터 동기화가 복잡해질 수 있음.

---

CSR과 SSR의 비교

특징	CSR (Client-Side Rendering)	SSR (Server-Side Rendering)
초기 로딩 시간	느림 (JS 다운로드 및 실행 필요)	빠름 (HTML 바로 표시 가능)
SEO	낮음 (JS 실행 후 렌더링)	높음 (완전한 HTML 제공)
사용자 경험	빠르고 부드러운 페이지 전환	페이지 전환 시 느릴 수 있음
서버 부하	낮음	높음
구현 복잡성	비교적 간단	복잡할 수 있음
JavaScript 의존성	필수	필요 없음 (기본 콘텐츠 표시 가능)

 

---

3. 하이브리드 렌더링

현대 웹 애플리케이션에서는 CSR과 SSR의 장점을 결합한 하이브리드 접근이 많이 사용됩니다.

예시

• Next.js:
  • 일부 페이지는 SSR, 나머지는 CSR로 처리.
  • getServerSideProps, getStaticProps 등을 통해 필요한 데이터만 서버에서 처리.

장점

1. SEO가 중요한 페이지는 SSR로 처리.
2. 비중요한 부분은 CSR로 처리하여 성능 최적화.

---

언제 CSR을 사용해야 할까?

• 애플리케이션 형태의 웹사이트 (e.g., 대시보드, 실시간 채팅).
• SEO가 덜 중요한 경우.
• 사용자와의 빠른 상호작용이 필요한 경우.

언제 SSR을 사용해야 할까?

• SEO가 중요한 콘텐츠 기반 웹사이트 (e.g., 블로그, 전자 상거래).
• 초기 로딩 속도가 중요한 경우.
• 검색 엔진 크롤링이 필수적인 경우.

CSR과 SSR의 적절한 선택 및 결합은 웹 애플리케이션의 성공적인 성능과 사용자 경험 제공의 핵심입니다. 😊