SSR? CSR?

1. SSR(Server Side Rendering)

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

SSR

[단계]

1. User가 웹사이트에 요청을 보냄

2. 서버는 즉시 렌더링 가능한 HTML 파일을 만듦

3. 클라이언트에게 전달되는 순간, 이미 렌더링 준비가 되어 있으므로 HTML은 즉시 렌더링 한다(이때, JavaScript가 읽히기 전이므로 사이트 자체는 조작 불가능함)

4. 클라이언트가 자바스크립트를 다운받음

5. 다운받아지는 동안 User는 컨텐츠를 볼 수 있지만, 사이트를 조작할 수 없음(이때 사용자 조작을 기억하고 있음)

6. 브라우저가 JavaScript프레임워크를 실행

7. JS까지 성공적으로 컴파일 되어 기억하고 있던 사용자 조작이 실행되고, 웹 페이지는 상호작용이 가능해짐

→ 서버에서 이미 렌더 가능한 상태로 클라이언트에게 전달되기 때문에, JS가 다운되는 동안 사용자는 무언가를 보고 있을 수 있음

---

2.  CSR(Client Side Rendering)

: 렌더링이 클라이언트 쪽에서 일어남

→ 서버는 요청을 받으면 클라이언트에게 HTML과 JS를 보내주고, 클라이언트는 그것을 받아 렌더링 시작

CSR

[단계]

1. User가 웹사이트에 요청을 보냄

2. CDN이 HTML파일과 JS로 접근할 수 있는 링크를 클라이언트로 보냄

3. 클라이언트는 HTML과 JS를 다운 받음(이때, 유저는 아무것도 볼 수 없음)

4. JS 다운로드

5. 다운이 완료된 JS가 실행됨. 데이터를 위한 API 호출

6. 서버가 API로부터 요청에 응답

7. API로부터 받아온 data를 placeholder 자리에 넣어줌. 페이지는 상호작용이 가능해짐 

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

 

---

[참고]

https://hahahoho5915.tistory.com/52

[간단정리] CSR vs SSR 특징 및 차이