CSR, SSR, SSG
이걸 설명해줄 일이 생겼었는데 나도 뭔가 횡설수설 하는 감이 있어서 정리하기로 했다
Next.JS 공부는 계속 하는데 뭔가 이론적인 면에서 공부가 너무 부족한것 같아서…
CSR
Client-Side Rendering
페이지의 핵심이 되는 HTML을 클라이언트에서 생성한다면 클라이언트 사이드 렌더링이라고 부른다
서버로부터는 최소한의 HTML만 전달받고, 클라이언트에서 대부분의 렌더링을 수행하면 클라이언트 사이드 렌더링이 된다
과정
- 클라이언트가 특정 URL로 페이지를 요청한다
- 서버는 최소한의 HTML만을 클라이언트에 응답한다
- 클라이언트는 HTML을 파싱하고, 필요한 리소스를 파악한 뒤 추가적으로 요청한다 (JS, CSS, 미디어 등)
- 서버는 리소스를 응답한다 (미디어의 경우, 외부 서버로부터 응답받는 경우도 있다)
- 클라이언트는 자바스크립트 파일을 받으면 HTML 파싱을 일시정지하고 자바스크립트를 실행한다
- 자바스크립트가 동적으로 DOM을 생성하고, 페이지를 렌더링한다
- 추가적으로 서버에 요청해야 할 데이터가 있을 경우, 비동기로 요청하므로 우선 임시 데이터로 렌더링하거나 로딩 화면을 출력하게 한다
- 자바스크립트를 통해 추가적으로 받아올 데이터가 있다면, 서버에 요청을 보낸다
- 클라이언트는 서버로부터 응답받은 데이터를 통해 페이지를 리렌더링하여 데이터를 채워넣는다
- 페이지를 이동할 경우, 이미 이전에 받아둔 자바스크립트를 통해 렌더링하며, 추가적인 데이터가 필요할 때만 서버에 요청을 보낸다
장점
- 한 번 로딩이 끝나면, 이후 페이지 로딩은 상당히 빨라진다
- 이미 받아둔 자바스크립트를 통해 페이지를 렌더링하기 때문