CSR vs SSR

구분	CSR(Client Side Rendering)	SSR(Server Side Rendering)
Rendering	클라이언트	서버
첫 페이지 로딩시간	👎	👍
나머지 로딩 시간	👍	👎
SEO	👍	👎
서버 자원 사용	🔥	👍

CSR(Client Side Rendering)

서버에서 html, js를 받아서와서 클라이언트에서 렌더링 한다.

장점

1. 빠른 로딩 속도, 반응성
   → 첫 렌더링 이후, 필요한 부분만 서버에 요청하기 때문에 구동 속도가 빠르다.

2. 낮은 서버 부하
   → 서버에서는 데이터를 보내주기만 하기때문에 서버 부하가 적다.

단점

1. 느린 첫 렌더링
   → 서버에서 데이터를 받아 렌더링을 하기때문에 SSR첫 렌더링에 비해 느리다.

2. SEO
   → 렌더링이 완료되기 전까지는 웹에서 알수있는 정보가 없기 때문에 MPA에 비해 상당히 불리하다.

---

SSR(Server Side Rendering)

서버에서 렌더링하여 클라이언트한테 보내준다.

장점

1. SEO 최적화
   → 크롤러 봇이 HTML을 무리 없이 읽을 수 있다.

2. 첫 로딩이 짧다
   → 서버에서 해당 페이지만 렌더링해 가져온다.

단점

1. 자바스크립트의 실행
   → 페이지는 구현이 되었으나, 클라이언트 측 js가 실행되기 전까지는 아무런 응답을 할 수 없다.

2. 서버 렌더링에 따른 부하
   → 서버에서 렌더링해서 가져온다.

참고
https://hahahoho5915.tistory.com/52
https://dev-ellachoi.tistory.com/28