19_클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 개념과 장/단점을 설명해주세요.

클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)은 웹 애플리케이션을 구축하는 두 가지 주요 접근 방식입니다.

✅ 클라이언트 사이드 렌더링 (Client-Side Rendering - CSR):
개념:
클라이언트 사이드 렌더링은 서버로부터 받은 초기 HTML과 빈 페이지를 로드한 후, 클라이언트(브라우저)에서 JavaScript를 사용하여 동적으로 컨텐츠를 렌더링하는 방식입니다.
페이지가 로드된 후에 JavaScript가 실행되어 서버로부터 데이터를 받아와 렌더링합니다.

🔵 장점:
빠른 초기 로드: 초기 페이지 로드 시 필요한 리소스 양이 적어 빠른 페이지 로딩이 가능합니다.
빠른 후속 네비게이션: 페이지 로드 이후 데이터를 비동기적으로 로드하므로 사용자 경험이 빠릅니다.
뛰어난 인터랙티브한 경험: JavaScript를 사용하여 동적 UI를 만들어 낼 수 있어, 사용자와의 상호작용이 풍부합니다.

🔴 단점:
SEO (검색 엔진 최적화) 문제: 초기 페이지 로드 시에는 컨텐츠가 없어 SEO에 불리합니다. 검색 엔진이 페이지를 크롤링할 때 JavaScript를 실행하지 못할 수 있습니다. 초기 로딩 속도: 초기에 필요한 자바스크립트 파일을 로드해야 하므로, 초기 로딩 시간이 오래 걸릴 수 있습니다. 브라우저 호환성: 클라이언트 사이드 렌더링을 위해서는 모든 클라이언트가 JavaScript를 지원해야 합니다.

 

✅  서버 사이드 렌더링 (Server-Side Rendering - SSR):
개념:
서버 사이드 렌더링은 서버에서 초기 HTML을 생성하고, 완전한 페이지를 렌더링하여 클라이언트에게 전달하는 방식입니다. 서버에서 데이터를 받아 HTML을 생성하기 때문에, 클라이언트에게는 이미 렌더링된 페이지가 전달됩니다.

🔵 장점:
SEO (검색 엔진 최적화): 초기에 완전한 페이지가 전달되므로 검색 엔진이 페이지를 쉽게 인덱싱할 수 있습니다.
초기 로딩 속도: 클라이언트가 렌더링을 기다리지 않고 바로 컨텐츠를 볼 수 있습니다.
브라우저 호환성: JavaScript가 필요하지 않으므로 브라우저 호환성 문제가 발생하지 않습니다.

🔴 단점:
느린 후속 네비게이션: 새로운 페이지를 로드할 때마다 서버에서 HTML을 생성해야 하므로, 네비게이션 속도가 느릴 수 있습니다.
서버 부하: 매 요청마다 서버가 페이지를 렌더링해야 하므로 서버 부하가 증가할 수 있습니다.
개발 복잡도: 서버와 클라이언트 사이의 데이터 흐름을 관리해야 하므로 개발이 더 복잡할 수 있습니다.
요약하자면, CSR은 빠른 후속 네비게이션과 뛰어난 인터랙티브 경험을 제공하지만 초기 로딩 속도와 SEO에 취약하며, SSR은 SEO와 초기 로딩 속도 면에서 우수하지만 후속 네비게이션과 서버 부하 측면에서 단점이 있습니다. 프로젝트의 요구 사항과 우선 순위에 따라 적절한 방식을 선택해야 합니다.