렌더링 하는 주체자가 클라이언트 (브라우저)

브라우저에 필요한 코드를 클라이언트에서 모두 다 다운받아서 클라이언트 측에서 실행된다.

  1. HTML React JS 가 모두 로드가 되어야 사이트가 보인다.
  2. JS 소스 코드를 하나하나 이해를 하고 DOM 요소로 변환 해준다

장점

  1. 한번 로딩 되면,빠른 UX 제공
  2. 서버가 부하가 작음

단점

  1. 페이지 로딩 시간(TTV)가 길다
  2. 자바스크립트 활성화 필수임
  3. SEO 최적화가 힘듬

<aside> 💡 SEO란 검색엔진 크롤러가 어떤 내용이 들어있는지 확인이 힘듬

</aside>

  1. 보안에 취약함

  2. CDN에 캐시가 안됨

<aside> 💡 CDN이란 사용자가 있는 국가나 근접한 나라에 네트워크 요청시 근접한 나라에 정보를 저장하여 캐시된 데이터를 가져온다 그렇기 때문에 속도가 빠름

</aside>

→ 이런 문제를 해결하기 위해 나온게 SSG,SSR이다.

즉, 브라우저가 javascript 코드를 가지고 있지 않거나, 요청 중인 상태라면 UI를 구성할 수 없고, 유저는 빈 화면을 보게 된다. 리액트 코드가 실행되기 전까지는 유저 화면에 아무것도 보이지 않는 것이다. 이렇게 클라이언트 측에서 UI를 빌드하는 것을 CSR 방식이라 한다