SSR vs CSR

SSR - Server Side Rendering

SSR의 동작 단계
1. User가 Website 요청을 보낸다.
2. Server는 즉시 렌더링 가능한 html파일을 만든다.
   (리소스 체크, 컴파일 후 완성된 HTML 컨텐츠로 만든다.)
3. 클라이언트에 전달되는 순간, 이미 렌더링 준비가 되어있기 때문에 HTML은 즉시 렌더링 된다. 
   그러나 사이트 자체는 조작 불가능하다. (Javascript가 읽히기 전이다.)
4. 브라우저가 자바스크립트를 다운받는다.
5. 다운 받는 사이 유저는 컨텐츠는 볼 수 있지만 사이트를 조작 할 수는 없다.
   이때의 사용자 조작을 기억하고 있는다.
6. 브라우저가 Javascript 프레임워크를 실행한다.
7. JS까지 성공적으로 컴파일 되었기 때문에 기억하고 있던 사용자 조작이 실행되고 
   이때부터 웹 페이지는 상호작용 가능해진다.

---

CSR - Client Side Rendering

CSR의 동작 단계
1. User가 Website 요청을 보낸다.
2. CDN이 HTML 파일과 JS로 접근할 수 있는 링크를 클라이언트로 보낸다.
   CDN : aws의 cloudflare를 생각하면 됨. 엔드 유저의 요청에 
   물리적으로 가까운 서버에서 요청에 응답하는 방식
3. 클라이언트는 HTML과 JS를 다운로드 받는다.
   (이때 SSR과 달리 유저는 아무것도 볼 수 없다.)
4. 브라우저가 자바스크립트를 다운받는다.
5. 다운이 완료된 JS가 실행된다. 데이터를 위한 API가 호출된다.
   (이때 유저들은 placeholder를 보게된다. )
6. 서버가 API로부터의 요청에 응답한다.
7. API로부터 받아온 data를 placeholder 자리에 넣어준다. 이때부터 페이지는 상호작용이 가능해진다.

---

비교

	SSR	CSR
첫 페이지 로딩시간	빠름	느림
추가 페이지 로딩시간	느림	빠름
서버 자원 사용	많음	적음
SEO(검색엔진최적화)	유리	불리

---

언제 SSR을 또는 CSR을 써야 하나?

SSR
- 네트워크가 느릴 때
- 사이트가 상호작용이 별로 없을 때
- SEO(검색엔진최적화)가 필요할 때

CSR
- 네트워크가 빠를 때
- 사이트에 풍부한 상호작용이 있는 경우
- SEO(검색엔진최적화)가 필요없을 때
- 서버의 성능이 안좋을 때