Client Side Rendering 과 Server Side Rendering 의 차이

CSR (Client Side Rendering)

웹 페이지의 렌더링이 클라이언트 (브라우저)측에서 일어납니다.
서버에서 인덱스라는 HTML 파일을 클라이언트에 보내주는데 이 인덱스 파일은 대부분 비어있어 사용자에게 아무것도 보여지지 않습니다. 
장점: 서버와 클라이언트 간의 데이터 트래픽이 감소하고 렌더링이 한번만 있기 때문에 페이지 이동이 빠릅니다.
단점: 사용자가 첫 화면을 보기까지 시간이 오래 걸릴 수 있다는 점과 SEO(Search Engine Optimization)가 좋지 않다는 점입니다.

 

SSR (Server Side Rendering)

서버에서 필요한 데이터를 모두 가져와서 HTML 파일을 동적으로 제어할 수 있는 소스코드와 함께 클라이언트에게 보내고 클라이언트 상에서는 잘 만들어진 HTML 문서를 받아와서 바로 사용자에게 보여줄 수 있게 됩니다.
장점: 첫번째 페이지(초기) 로딩이 빨라집니다. 그리고 모든 컨텐츠가 HTML에 담겨져 있기 때문에 더 효율적인 SEO가 가능합니다. 
단점: 각 페이지별로 매번 로딩시간 및 새로고침 현상이 발생한다는 점은 UX및 UI에 심각한 영향을 줄 수 있습니다. 그리고 서버에 과부하가 걸리기 쉽습니다. 가장 치명적인 단점은, 사용자가 빠르게 웹사이트를 확인할 수는 있지만, 동적으로 자바스크립트를 처리하는 자바스크립트를 아직 다운받지 못해서 버튼과 같은 요소를 클릭 했을 때 반응이 없을 수 있습니다.

SSG (Static Site Generation)

• React + Gatsby
• React + NextJS - NextJs는 강력한 서버 사이드 렌더링을 지원하는 라이브러리였는데, 이제는 Static Site Generation 지원

---

Reference

https://velog.io/@longroadhome/FE-CSRClient-Side-Rendering-vs-SSRServer-Side-Rendering-feat.-React%EB%A5%BC-%EC%A4%91%EC%A0%90%EC%9C%BC%EB%A1%9C