csr ssr

CSR(Client-Side Rendering)

- 웹 페이지의 렌더링을 클라이언트(브라우저)에서 처리하는 방식이다.

 

◆ 동작방식

1. 사용자가 웹 사이트를 요청하면, 서버는 정적인 HTML 파일과 JavaScript 파일을 반환한다.

2. 브라우저가 JavaScript를 실행하여 필요한 데이터를 API로 서버에서 가져오고, 동적으로 DOM을 구성한다.

3. 최종적으로 사용자에게 완전한 웹 페이지가 렌더링한다.

 

◆ 장점

- 인터랙티브한 UI: SPA(Single Page Application) 개발에 적합.

- 효율적인 리소스 관리: 초기 로딩 이후, 필요한 데이터만 API로 받아옴.

- 사용자 경험 개선: 페이지 전환이 빠르고 부드러움.

 

◆ 단점

- 초기 로딩 속도 느림: JavaScript 실행 전에 콘텐츠가 표시되지 않음.

- SEO 문제: 크롤러가 JavaScript를 실행하지 못하면 콘텐츠를 인덱싱하지 못함.

 

◆ 대표 기술

React, Angular, Vue.js 등.

 

 

ssr이란?

 

- 웹 페이지의 렌더링을 서버에서 처리하는 방식이다.

 

◆ 동작 방식

1. 사용자가 웹 사이트를 요청하면 서버가 HTML을 즉시 생성한다.

2. 생성된 HTML을 브라우저로 반환한다.

3. 브라우저는 HTML을 바로 렌더링하여 사용자에게 완전한 페이지를 보여준다.

 

◆ 장점

- SEO 친화적: 검색 엔진 크롤러가 HTML 콘텐츠를 쉽게 인덱싱 가능.

- 빠른 초기 로딩 속도: HTML이 바로 렌더링되므로 사용자 경험 개선.

 

◆ 단점

- 서버 부하: 각 요청마다 HTML을 생성해야 하므로 서버 자원 소모가 큼.

- 복잡한 구현: 상태 관리와 데이터 동기화가 어려움.

 

◆ 대표 기술

Next.js (React 기반), Nuxt.js (Vue 기반), Angular Universal 등.

 

 

항목	CSR (Client-Side Rendering)	SSR (Server-Side Rendering)
랜더링위치	클라이언트(브라우저)	서버
초기 로딩 속도	느림	빠름
SEO(검색엔진)	제한적(JavaScript 의존)	우수 (HTML 직접 제공)
페이지 전환	빠르고 부드러움 (SPA방식)	느림 (새로운 요청마다 HTML 생성)
서버 부하	낮음 (HTML은 정적이고 API 요청 사용)	높음 (요청마다 HTML 생성)
데이터 요청방식	클라이언트에서 동적으로 API호출	서버에서 HTML에 데이터를 포함하여 전달