CSR& SSR?

1. 유저가 웹사이트에 요청을 보냅니다
2. CDN이 HTML 파일과 JS에 접근할 수있는 링크를 클라이언트로 보냅니다
3. 클라이언트는 HTML 과 JS를 다운 받습니다.

(⇒ 이때 유저는 사이트에서 아무것도 볼 수 없습니다)

1. 브라우저가 JS를 다운 받습니다
2. JS가 실행 되고, 데이터를 위한 API가 호출됩니다. 이때 사용자가 placeholder를 보게 됩니다
3. 서버가 API로 부터의 요청에 응답합니다
4. APOI로부터 받아온 데이터를 들어갈 placeholder에 넣어 줍니다. 이제 사용자가 홈페이지를 사용할 수 있습니다

CSR

위는 CSR의 흐름을 그린 것으로, CSR은 Client Side Rendering : 클라이언트 사이드 렌더링 이라고 부릅니다.

CSR은 웹사이트의 JS가 웹사이트의 서버가 아닌, 브라우저에서 렌더링되는 것을 의미합니다 . HTML 의 모든 요소들을 가져오는 것이 아니라, JS 파일에 서 필요로 하는 필수 HTML만 렌더링 되는 것을 이야기합니다 . 그렇기 때문에 CSR은 JS와 HTML 요소들이 모두 다운로드 되고 실행이 끝나기 전까지는 사용자가 페이지를 확인하기가 어렵습니다.

첫 렌더링은 조금 느리지만, 이후 부터는 매 페이지를 렌더링하지 않기 때문에 빠른 속도로 렌더링 됩니다, 그리고 매번 서버에 요청을 할때 마다 전체 UI를 로딩하지 않아도 됩니다.

1. 유저가 페이지에 요청을 보냅니다
2. 서버가 렌더링준비가된 HTML 파일을 준비합니다
3. 브라우저는 빠르게 HTML을 준비하지만 아직 상호작용이 가능하지는 않습니다