[TIL] CSR, SSR의 차이

1. 클라이언트 사이드 렌더링

개념:
CSR은 브라우저에서 직접 페이지를 렌더링하는 방식입니다
초기 요청 시에는 HTML 구조나 내용을 포함하지 않는 최소한의 HTML 템플릿과 JavaScript 파일을 받아옵니다
JavaScript가 실행되면 필요한 데이터를 AJAX 요청으로 가져와서 페이지를 동적으로 생성하고 렌더링합니다

장점:
사용자 경험: 초기 로딩 후에는 필요한 부분만 변경하기 때문에 페이지 내의 동작이나 다른 뷰로의 이동이 매우 빠릅니다 
서버 부하 감소: 서버는 주로 정적 자원을 제공하고 API 요청을 처리하기 때문에 렌더링 부담이 감소합니다

단점:
초기 로딩 속도: 초기 페이지 로드에 필요한 자원을 모두 다운로드 받아 실행해야 하기 때문에 첫 로딩이 느릴 수 있습니다
SEO: 검색 엔진이 JavaScript를 완벽하게 실행하지 못하는 경우, 렌더링 되지 않은 페이지를 크롤링할 수 있기 때문에 SEO 문제가 발생할 수 있습니다
서버 부하: 사용자 수가 많아질 경우, 초기 자원 제공에 대한 부하가 서버에 생길 수 있습니다

2. 서버 사이드 렌더링

개념:
SSR은 서버에서 페이지를 렌더링하여 최종 HTML 결과를 클라이언트에 전달하는 방식입니다
클라이언트는 서버로부터 완성된 페이지를 받아 브라우저에서 그대로 표시합니다

장점:
초기 로딩 속도: 사용자는 완전히 렌더링 된 페이지를 바로 받기 때문에 초기 로딩 속도가 빠릅니다
SEO: 서버에서 완전히 렌더링 된 페이지를 제공하기 때문에 검색 엔진 최적화에 유리합니다

단점:
서버 부하: 각 요청마다 서버에서 페이지를 렌더링해야 하므로 부하가 증가합니다
사용자 경험: 페이지나 컨텐츠의 변화가 있을 때마다 새로운 HTML을 가져와야 하므로 페이지 전환 시 딜레이가 생길 수 있습니다