CSR vs SSR

항목	CSR (Client Side Rendering)	SSR (Server Side Rendering)
정의	클라이언트에서 페이지를 렌더링하는 방식	서버에서 페이지를 렌더링하는 방식
초기 로딩 속도	느림 (자바스크립트를 로드하고 실행해야 함)	빠름 (서버에서 렌더링된 HTML을 전송받음)
SEO 최적화	SEO 문제가 있을 수 있음 (크롤러 호환성 문제)	SEO에 유리 (서버에서 렌더링되어 HTML 전달)
서버 부하	서버 부하 감소 (클라이언트가 렌더링 작업 수행)	서버 부하 증가 (렌더링 작업이 서버에서 이루어짐)
사용자 경험	웹 애플리케이션과 유사한 경험 제공 (SPA)	전통적인 웹 페이지 경험 (MPA)
구현 및 유지보수	새로운 기술을 습득해야 할 수 있음, 프레임워크 사용 필요	전통적인 방식으로 구현 및 유지보수 가능

🔖 CSR (Client Side Rendering)

클라이언트 측에서 자바스크립트를 사용하여 페이지 내용을 동적으로 렌더링합니다. 웹 서버는 초기 페이지 요청에 대해서만 HTML, CSS, JavaScript 파일을 제공하며, 이후의 동작은 클라이언트 측에서 처리됩니다.

📌 장점

• 서버 부하 감소 : 클라이언트가 렌더링 작업을 수행하기 때문에 서버의 부하가 줄어듭니다.
• 사용자 경험 향상 : 페이지 전환 시 새로운 요청 없이 클라이언트에서 렌더링되어 사용자 경험이 좋아집니다.

📌 단점

• 초기 로딩 속도가 느림 : 클라이언트에서 자바스크립트를 로드하고 실행해야 하므로 초기 로딩 속도가 느릴 수 있습니다.
• SEO 최적화 문제 : 검색 엔진 크롤러가 자바스크립트를 완벽하게 해석하지 못해 SEO에 문제가 발생할 수 있습니다.

🔖 SSR (Server Side Rendering)

서버에서 페이지의 HTML을 렌더링한 후 클라이언트로 전달합니다. 클라이언트는 이미 렌더링된 HTML을 받아 화면에 표시하며, 필요한 경우 추가적인 동작을 수행합니다.

📌 장점

• 초기 로딩 속도가 빠름 : 서버에서 미리 렌더링된 HTML을 전달받기 때문에 초기 로딩 속도가 빠릅니다.
• SEO 최적화 : 서버에서 렌더링된 HTML을 전달받아 크롤러가 쉽게 인식하고, SEO에 유리합니다.

📌 단점

• 서버 부하 증가 : 모든 페이지 렌더링 작업이 서버에서 이루어지므로 서버의 부하가 증가합니다.
• 구현 및 유지보수 복잡도 : 클라이언트와 서버 사이의 상호 작용이 더 많아져 구현 및 유지보수가 복잡해질 수 있습니다.