CSR(Client Side Rendering) : 렌더링이 클라이언트쪽에서 일어난다
.
사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링하는 방식
SPA(Single Page Application)은 CSR방식을 채택
# CSR의 과정
-클라이언트에서 초기화면을 로드하기 위해 User가 서버에 요청 보냄
-서버는 렌더링 가능한 HTML 파일을 만든다(리소스 체크, 컴파일 후 왼성된 HTML 파일)
-클라이언트에 전달되는 순간 HTML은 즉시 렌더링 되나 사이트 자체 조작은 불가(js파일 받기 전)
-화면에 표시하는데 필요한 완전한 리소스의 응답을 함(모든 js파일 다운받는 과정, 초기 로딩 시간 오래걸림)
-JS파일 컴파일 후 웹페이지 상호작용 가능
# CSR의 장점
- 변경된 부분과 관련된 데이터만 가져오기 때문에 SSR보다 속도가 빠름
- 변경된 부분만 요청함으로써 서버 부하 감소
- 컨텐츠 전환 과정에서 깜빡임(새로고침)이 없이 부드러운 이동 경험 - 좋은 UX, 사용자 친화적
# CSR의 단점
- SEO(Search Engine Optimization : 검색 엔진 최적화)에 불리함
└CSR을 사용하는 SPA는 JS를 사용하여 사용자와 상호 작용 후 페이지 내용을 로드하기 때문에 웹 크롤러가 페이지를 색인화 하려고 하면 내용의 빈 페이지 처럼 보이게 된다
- 모든 JS파일을 다운받아야 하기 때문에 초기 로딩속도가 느리다
SSR(Server Side Rendering) : 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달
서버로부터 완전하게 만들어진 HTML 파일을 받아와 페이지 전체를 렌더링하는 방식
MPA(Multi Page Application)은 SSR방식을 채택
# SSR의 과정
- 클라이언트가 초기 화면을 로드하기 위해 서버에 요청
- 서버가 화면 표시를 위한 모든 요소를 담은 HTML과 JS코드를 브라우저에 응답으로 전달
- 클라이언트에 이미 렌더링 준비된 HTML 즉시 렌더링. 그러나 사이트 자체 조작 불가
- JS코드가 다운받아지고 있는 사이에 유저는 컨텐츠는 조작할 수 없으나 사용자 조작을 기억
- JS 컴파일 후 기억하고 있던 사용자 조작 실행. 웹페이지 상호작용 가능
# SSR의 장점
- SEO(Search Engine Optimization : 검색 엔진 최적화)에 유리
└어플리케이션은 화면을 구성하는 각각의 페이지가 있기 때문
- 서버로부터 화면을 렌더하기 위한 필수적인 요소(모든 데이터가 담긴 HTML)를 먼저 가져오기 때문에 빠른 초기 로딩
# SSR의 단점
- TTV(Time to View)와 TTI(Time to Interact)의 간 시간 간격 → 사용자가 버튼을 클릭하거나 이동하려고 해도 아무런 반응이 없음
- 요청시마다 새로고침 -> UX안좋음
- 서버 부화 : 새로운 요청이 생길 때마다 모든 페이지의 정보를 가져와 렌더링
# CSR의 사용권장 예시
- 네트워크가 빠를 때
- 서버의 성능이 좋지 않을 때
- 사용자에게 보여줘야 하는 데이터의 양이 많을 때( 로딩창을 띄울 수 있음)
- 메인 스크립트가 가벼울 때
- SEO 사용하지 않을 때
- 웹 어플리케이션에 사용자와 상호 작용할 것들이 많을 때 → 사용자 경험을 렌더링되기 전에 막는것이 유리함
# SSR의 사용권장 예시
- 네트워크가 느릴 때 (CSR은 한번에 불러오지만 SSR은 각 페이지 나눠서 불러오기 때문)
- SEO가 필요할 때
- 최초 로딩이 빨라야 하는 사이트 개발할 때
- 메인 스크립트가 크고 로딩이 매우 느릴 때
- 웹사이트가 상호작용이 별로 없을 때
출처
'React' 카테고리의 다른 글
| [React] Context API (0) | 2022.10.23 |
|---|---|
| [React] Immer란? (0) | 2022.10.20 |
| SPA(Single Page Application) vs MPA(Multi Page Application) (2) | 2022.10.18 |
| [Hook] useCallback, useMemo (0) | 2022.10.13 |
| [Hook] useState, useEffect 상태값과 생명주기 (0) | 2022.10.13 |
댓글