CSR vs SSR
클라이언트 사이드 렌더링과 서버사이드 렌더링
what?
CSR |
특징 - Angular 및 react와 같은 대부분의 웹 프레임워크가 기본적으로 지원 - SPA 단일페이지어플 - 상호작용 (ex-게임) - 양식, 채팅 애플리케이션과 같은 동적인 콘텐츠 - 기본적으로 웹 브라우저는 처음에 빈 html 파일을 로드 -> 로드되는 자바스크립트와 스타일은 웹 브라우저에서 전체 사용자 친화적인 페이지를 렌더링하는 역할함 동적으로 렌더링 한다? 웹 페이지가 사용자와 상호작용하거나 데이터가 변경될 때, 웹 애플리케이션에서 해당 변경사항을 즉시 반영하여 화면을 업데이트하는 것 단점 - 검색엔진 최적화x : 초기 HTML 문서에 페이지 내용이 포함되지 않아 검색 엔진이 페이지를 제대로 색인화하지 못하는데, 이는 자바스크립트에 의해 동적으로 생성되기 때문입니다. |
|
SSR |
특징 - 초기 페이지 로딩 시 서버에서 HTML을 생성하고 전송하여 콘텐츠를 포함한 완전한 페이지를 제공 - 검색 엔진 최적화(SEO)에 우수, 초기 HTML에 콘텐츠가 포함되어 검색 엔진이 쉽게 색인화 가능 - 빠른 첫 페이지 로딩을 제공하여 사용자 경험을 향상 - 정적인 콘텐츠에 적합하며, 사용자 요청 시 동적 데이터를 추가로 불 러오기 가능 |
|
참고 블로그 : https://dev.to/pahanperera/visual-explanation-and-comparison-of-csr-ssr-ssg-and-isr-34ea