CSR(클라이언트 사이드 렌더링)과 SSR(서버 사이드 렌더링)

Jean Young Park·2024년 1월 21일
0

react

목록 보기
32/32

CSR과 SSR

CSR(클라이언트 사이드 렌더링)과 SSR(서버 사이드 렌더링)은 웹 애플리케이션에서 사용되는 두 가지 주요 렌더링 방식이다.

1. 렌더링 위치

CSR
클라이언트 사이드 렌더링은 브라우저에서 실행된다. 즉, 초기 요청에 대한 HTML을 서버에서 받고, 그 후에 JavaScript 코드가 브라우저에서 실행되어 페이지의 내용을 동적으로 렌더링한다.

SSR
서버 사이드 렌더링은 서버에서 실행된다. 초기 요청에 대한 HTML이 서버에서 생성되고, 서버에서 데이터를 가져와 페이지를 완전히 렌더링한 후 클라이언트에 전송된다.

2. 초기 로딩 속도

CSR
초기 로딩 속도가 느릴 수 있다. 브라우저는 HTML을 받은 후 JavaScript를 다운로드하고 실행해야 하므로, 사용자가 페이지를 보는 데 시간이 걸릴 수 있다.

SSR
초기 로딩 속도가 빠르다. 서버에서 렌더링된 HTML이 즉시 브라우저에 표시되므로 사용자가 빠르게 콘텐츠를 볼 수 있다.

3. 검색 엔진 최적화(SEO)

CSR
검색 엔진이 페이지 콘텐츠를 크롤링하고 인덱싱하기 어려울 수 있다. JavaScript 코드가 실행되어 동적으로 콘텐츠를 렌더링하기 때문이다.

SSR
검색 엔진 최적화가 용이하다. 초기 HTML에 모든 콘텐츠가 포함되므로 검색 엔진이 페이지를 쉽게 이해하고 색인화할 수 있다.

서버 부하
CSR
클라이언트에서 렌더링하기 때문에 서버 부하가 상대적으로 낮다.

SSR
서버에서 렌더링하기 때문에 높은 서버 부하가 발생할 수 있다. 특히 많은 요청을 처리해야 하는 경우에는 서버의 성능이 중요하다.

난 아직 ssr을 사용 안해봤는데 이번에 사용해봐야겠다. 서버의 성능이 중요하다 했으니 작은 규모의 프로젝트를 진행해보는게 좋겠다.

0개의 댓글