SSR VS CSR

 

SSR (Server-Side Rendering)

1. 개념

Server-Side Rendering(서버 사이드 렌더링)은 웹 페이지의 HTML 콘텐츠를 서버에서 렌더링한 후 클라이언트(웹 브라우저)에 전달하는 렌더링 방식입니다. 클라이언트는 서버에서 전달받은 완전한 HTML을 그대로 렌더링하여 화면에 표시합니다.

---

2. 특징

• 초기 로드 속도 향상: 서버에서 이미 렌더링된 HTML을 제공하기 때문에, 클라이언트가 화면을 표시하는 데 걸리는 시간이 빠릅니다.
• SEO(검색 엔진 최적화) 우수: HTML 콘텐츠가 서버에서 렌더링되므로 검색 엔진 크롤러가 쉽게 콘텐츠를 인덱싱할 수 있습니다.
• 초기 데이터 포함: 클라이언트가 데이터를 따로 요청할 필요 없이, 서버에서 데이터를 포함한 HTML을 직접 제공.

---

3. 동작 방식

1. 클라이언트가 페이지 요청을 서버에 보냄.
2. 서버는 필요한 데이터를 가져와 HTML 페이지를 렌더링.
3. 완전한 HTML 페이지를 클라이언트에 전달.
4. 클라이언트는 HTML을 받아 즉시 화면에 표시.

---

4. 장점

1. 빠른 초기 로드: 완성된 HTML을 전달하므로 첫 화면 로드가 빠름.
2. SEO 친화적: 검색 엔진이 콘텐츠를 쉽게 크롤링하고 인덱싱 가능.
3. 낮은 클라이언트 의존성: 브라우저의 JavaScript 실행에 의존하지 않음.

---

5. 단점

1. 서버 부하 증가: 서버에서 HTML 렌더링과 데이터 처리를 모두 수행해야 하므로 부하가 큼.
2. 복잡한 구현: 클라이언트와 서버 간의 데이터 동기화 및 상태 관리가 복잡.
3. 느린 인터랙션: 페이지 전환 시마다 서버에 요청해야 하므로 클라이언트-서버 간 요청이 빈번해질 수 있음.

---

6. 주요 사용 사례

• SEO가 중요한 웹사이트: 블로그, 뉴스 사이트, 전자상거래 사이트.
• 초기 로딩 속도가 중요한 서비스: 사용자 유입이 많은 콘텐츠 중심 웹 애플리케이션.

CSR (Client-Side Rendering)

1. 개념

Client-Side Rendering(클라이언트 사이드 렌더링)은 **클라이언트(브라우저)**에서 JavaScript를 실행해 화면을 렌더링하는 방식입니다.

서버는 기본적인 HTML과 JavaScript 파일만 제공하고, 브라우저가 이를 다운로드한 후 실행하여 화면을 동적으로 구성합니다.

---

2. 동작 방식

1. 클라이언트가 서버에 요청을 보냄.
2. 서버는 기본 HTML(스켈레톤)과 JavaScript를 전달.
3. 클라이언트는 JavaScript를 실행하여 필요한 데이터를 API로 요청하고, DOM을 동적으로 생성.
4. 화면에 콘텐츠가 표시됨.

---

3. 특징

• SPA(Single Page Application) 기반: 한 번 로드된 페이지 내에서 자바스크립트를 통해 동적으로 콘텐츠를 갱신.
• 상태 관리 필요: 브라우저 내에서 상태를 유지하며 사용자 경험을 제공.

---

4. 장점

1. 빠른 인터랙션: 페이지 전환이 서버 요청 없이 클라이언트에서 처리됨.
2. 서버 부하 감소: 서버는 정적인 파일만 제공하면 됨.
3. 모던 웹 애플리케이션: React, Vue, Angular 등의 라이브러리/프레임워크와 잘 맞음.

---

5. 단점

1. SEO 제한: 검색 엔진이 JavaScript를 실행하지 않으면 콘텐츠를 크롤링하지 못함.
2. 초기 로드 속도 느림: JavaScript 로드 및 실행이 완료된 후에 화면 렌더링.
3. 복잡한 클라이언트 코드: 상태 관리와 데이터 처리가 모두 클라이언트에 집중되므로 코드 복잡성이 증가.

---

6. 주요 사용 사례

• 동적인 인터페이스가 중요한 웹 애플리케이션: 대시보드, 소셜 미디어 플랫폼.
• SPA(Single Page Application) 기반 서비스: React, Vue.js, Angular 등으로 구현된 웹 애플리케이션.

---

SSR과 CSR 활용 사례 요약

• SSR: 초기 로딩 속도 및 SEO가 중요한 웹사이트(블로그, 뉴스, 전자상거래 사이트).
• CSR: 사용자와의 상호작용이 많고, SPA로 설계된 애플리케이션(대시보드, 소셜 미디어).