CSR, SSR, SSG

이걸 설명해줄 일이 생겼었는데 나도 뭔가 횡설수설 하는 감이 있어서 정리하기로 했다

Next.JS 공부는 계속 하는데 뭔가 이론적인 면에서 공부가 너무 부족한것 같아서…

CSR

Untitled

Client-Side Rendering

페이지의 핵심이 되는 HTML을 클라이언트에서 생성한다면 클라이언트 사이드 렌더링이라고 부른다

서버로부터는 최소한의 HTML만 전달받고, 클라이언트에서 대부분의 렌더링을 수행하면 클라이언트 사이드 렌더링이 된다

과정

  1. 클라이언트가 특정 URL로 페이지를 요청한다
  2. 서버는 최소한의 HTML만을 클라이언트에 응답한다
  3. 클라이언트는 HTML을 파싱하고, 필요한 리소스를 파악한 뒤 추가적으로 요청한다 (JS, CSS, 미디어 등)
  4. 서버는 리소스를 응답한다 (미디어의 경우, 외부 서버로부터 응답받는 경우도 있다)
  5. 클라이언트는 자바스크립트 파일을 받으면 HTML 파싱을 일시정지하고 자바스크립트를 실행한다
  6. 자바스크립트가 동적으로 DOM을 생성하고, 페이지를 렌더링한다
  7. 자바스크립트를 통해 추가적으로 받아올 데이터가 있다면, 서버에 요청을 보낸다
  8. 클라이언트는 서버로부터 응답받은 데이터를 통해 페이지를 리렌더링하여 데이터를 채워넣는다
  9. 페이지를 이동할 경우, 이미 이전에 받아둔 자바스크립트를 통해 렌더링하며, 추가적인 데이터가 필요할 때만 서버에 요청을 보낸다

장점