CSR vs SSR 차이

CSR (Client Side Rendering)

개념

브라우저 (클라이언트)가 받아온 자바스크립 코드로 화면을 렌더링
서버는 주로 빈 id가 app인 div박스와 JS/CSS 파일만 내려준다.
브라우저가 그 위에 데이터를 가져와서 화면 UI를 그려준다.

특징

초기 로딩 시: HTML이 거의 비어있어서, JS 파일을 다운받고 실행한 뒤에야 화면이 보이기 시작
화면 전환: JS 만으로 뷰(View)를 바꾸기 때문에 전체 페이지 새로고침 없이 빠름
SEO(검색엔진최적화): 초기에 실제 콘텐츠가 없어 검색 봇이 크롤링하기 어려울 수 있음

비유

재료 상자 배송이 왔다.
서버는 요리재료 (HTML 뼈대 + JS)만 주고 브라우저가 도착한 재료로 직접 요리를하여 완성.

SSR (Server Side Rendering)

개념

서버에서 미리 완성된 HTML을 만들어서 브라우저에 전달
브라우저는 받은 HTML만큼 즉시 화면에 보임
추가 인터랙션(버튼 클릭 등)은 JS가 내려온 뒤에 활성화

특징

초기 로딩 시: 이미 내용을 갖춘 HTML을 바로 보여주므로 첫화면 렌더링이 빠르고,
SEO 친화적: 검색 엔진 봇도 완성된 콘텐츠를 바로 읽을 수 있음
서버 부담↑: 매 요청마다 서버 CPU/메모리로 HTML을 생성해야 해서 트래픽이 많아지면 부담

비유

완성된 요리 배달
서버가 완전히 조리된 음식을 보내주고 브라우저는 바로 먹기만 하면 되는 느낌!)

CSR vs SSR

구분	CSR	SSR
어디서 렌더링?	브라우저(클라이언트)	서버
초기 화면 로딩	빈 뼈대 + JS 다운로드 후 렌더링 → 느릴 수 있음	완성된 HTML → 바로 보여줘서 빠름
화면 전환 UX	SPA 라이브러리로 전체 새로고침 없이 부드럽게 전환	링크 클릭마다 전체 페이지 새로고침 → UX 단절감
SEO	초기 콘텐츠가 없어 검색엔진에 불리할 수 있음	완성된 HTML로 제공 → 검색엔진 크롤링에 유리
서버 부하	서버는 정적 파일만 제공 → 부하 적음	매 요청마다 HTML 생성 → 부하 증가 가능
화면표시	JS실행 후에야 컨텐츠 보임	서버 응답 즉시 . JS없이도 보임