CSR vs SSR



Client-Side Rendering (CSR)

CSR 과정

→ 웹 애플리케이션의 초기 페이지 로딩 후, 웹 브라우저에서 JavaScript가 실행되고, JavaScript 코드를 통해 동적으로 콘텐츠를 가져와서 화면에 렌더링하는 방식

서버에서 초기 페이지 로딩 → 클라이언트에서 JS 실행 → 동적 데이터 요청 → 데이터 처리 및 렌더링



Sever-Side Rendering (SSR)

SSR 과정

→ 서버 측에서 초기 페이지 렌더링을 수행하고 완전한 HTML 페이지를 클라이언트로 제공하는 방식

서버에서 초기 페이지 렌더링 → HTML 페이지 전송 → 클라이언트에서 초기 페이지 로딩 → 동적 데이터 요청 → 클라이언트 측 렌더링



CSR 🆚 SSR

CSR SSR
장점 - 빠른 초기 페이지 로딩
- 부드럽고 빠른 페이지 간 전환
- 서버 부하 감소		 - SEO 용이성
- 초기 로딩 후 완전한 페이지 (UX향상)
단점 - SEO 취약
- 초기 페이지 로딩 이후 백엔드 API 호출 필요
- 초기 로딩 후 빈 페이지		 - 초기 로딩 속도 느림
- 서버 부하 증가