CSR (Client Side Rendering)

말 그래로 렌더링이 클라이언트 쪽에서 일어난다.

즉 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다. 클라이언트는 요청한 파일을 받아 렌더링을 시작한다.

CSR

CSR

  1. User가 웹사이트를 요청
  2. *CDN은 JS에 대한 링크가 있는 HTML 파일을 빠르게 제공할 수 있습니다.*
  3. 클라이언트(브라우저)는 HTML을 다운로드 한 다음 JS를 다운로드 하지만 사이트는 사용자에게 표시되지 않습니다. (이때 SSR과 달리 유저는 아무것도 볼 수 없다.)
  5. 다운로드가 완료되면 JS가 실행되고 API가 호출되며 사용자는 placeholder를 보게된다.
  6. 서버는 API에서 요청한 데이터로 응답합니다.
  7. API로부터 받아온 data를 placeholder 자리에 넣어준다. 이제 페이지는 상호작용이 가능합니다.

즉, 서버에서 처리 없이 클라이언트로 보내주기 때문에 자바스크립트가 모두 다운로드 되고 실행이 끝나기 전까지 사용하는 볼 수 있는게 없습니다.

Untitled

SSR (Server Side Rendering)

말 그대로 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다.

SSR

SSR