[React] CSR vs SSR 차이점!

CSR

Client Side Rendering의 약자 말그대로 요청이 클라이언트 즉, 프론트에서 일어난다.

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

Server Side Rendering의 약자
말 그대로 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다.
HTML,CSS는 이미 서버쪽에서 렌더가 마쳤기 때문에 유저는 모든 UI를 볼 수 있지만
JS는 클라이언트에서 다운되기 때문에 사이트를 조작할 수는 없다.

CSR vs SSR 차이

1. 웹페이지를 로딩하는 시간
   웹 페이지 로딩의 종류는 두 가지로 나눌 수 있다.
   하나는 웹 사이트의 가장 첫 페이지를 로딩하는 것.
   다른 하나는 나머지를 로딩하는 것

첫 페이지 로딩시간

• CSR의 경우 HTML, CSS와 모든 스크립트들을 한 번에 불러온다. 반면 SSR은 필요한 부분의 HTML과 스크립트만 불러오게 된다.

• 따라서 평균적으로 SSR이 더 빠르다.

나머지 로딩 시간

• 첫 페이지를 로딩한 후, 사이트의 다른 곳으로 이동하는 식의 동작을 가정하자. CSR은 이미 첫 페이지 로딩할 때 나머지 부분을 구성하는 코드를 받아왔기 때문에 빠르다.
• 반면, SSR은 첫 페이지를 로딩한 과정을 정확하게 다시 실행한다. 그래서 더 느리다.