CSR (Client Side Rendering)
CSR은 사용자의 브라우저, 즉 클라이언트 사이드에서 모든 렌더링이 이루어지는 방식입니다. HTML 파일이 존재하지만 일반적으로 이 HTML 파일에는 id를 가지는 하나의 HTML 엘리먼트를 가지고 있고, 이 HTML 엘리먼트를 기준으로 생성된 JS 파일들이 브라우저로 전송된 이후에 렌더링이 일어나게 됩니다. 대부분의 로직이 클라이언트 측에서 처리되기 때문에 서버의 부담이 줄어드는 장점이 있습니다.
대표적인 라이브러리/프레임워크로 React, Vue, Angular와 같은 것들이 있습니다.
장점
풍부한 인터렉션
CSR은 동적인 사용자 경험을 제공하기에 적합합니다. 페이지 전환 없이 UI를 업데이트할 수 있다는 장점이 있습니다.
서버 부하 감소
초기 로드 이후의 인터렉션은 서버에 요청 없이 클라이언트 측에서 처리할 수 있으므로 서버의 부하가 감소합니다.
캐싱 효율성
한 번 로드된 페이지 리소스(JS, CSS)는 다수의 페이지에서 재사용될 수 있으므로 네트워크 사용량을 줄일 수 있습니다.
단점
초기 로딩 시간
모든 스크립트와 필요한 리소스를 다운로드 받아야 하기 때문에 초기 페이지 로딩 시간이 길어질 수 있습니다.
SEO 문제
검색 엔진이 JavaScript를 실행하지 않는 경우 페이지의 내용을 제대로 크롤링하지 못할 수 있어 SEO에 불리할 수 있습니다.
브라우저 호환성
구형 브라우저에서는 최신 JavaScript 기능을 지원하지 않을 수 있어서 폴리필(polyfill)이나 트랜스파일러(transpiler) 사용이 필요할 수 있습니다.
SSR (Server Side Rendering)
SSR은 웹 어플리케이션 관련 코드를 서버에서 모두 렌더링 한 이후에 브라우저에 HTML 파일을 전송하는 렌더링 방식입니다. 일반적으로 JS 파일이 클라이언트로 전송되지 않고, HTML 파일만 전송이 됩니다. 사용자가 특정 URL에 접속하게 되면 해당 URL에 관련된 HTML 파일이 전송되어 사용자에게 보여지게 되는 렌더링 방식입니다. 초기 페이지 로딩 속도를 개선하고, 검색 엔진 최적화(SEO)에 유리합니다.
장점
SEO 최적화
검색 엔진이 HTML 콘텐츠를 즉시 볼 수 있기 때문에, 브라우저에서 검색 상단에 위치하기 쉬워집니다.
빠른 초기 로딩
서버는 HTML 파일만을 브라우저로 전송합니다. 따라서, 사용자는 서버에서 렌더링된 페이지를 즉시 받아볼 수 있기 때문에 초기 콘텐츠 로딩 시간이 줄어듭니다.
일관된 사용자 경험 / 향상된 퍼포먼스
대부분의 렌더링 작업이 서버에서 이루어지기 때문에, 클라이언트 기기의 성능에 덜 의존적입니다. 또한 이는 다양한 기기와 브라우저에서도 비슷한 로딩 시간과 렌더링 성능을 제공하기 때문에 일관된 사용자 경험을 보장합니다.
단점
서버 부하
모든 페이지 요청이 서버에서 렌더링 되기 때문에, 트래픽이 많은 사이트의 경우엔 서버 부하가 증가할 수 있습니다.
페이지 전환 지연
사용자가 다른 페이지로 이동할 때마다 서버로부터 새로운 HTML을 받아야 하기 때문에, 페이지 전환 시간이 길어질 수 있습니다.
개발 복잡성
클라이언트와 서버 간의 데이터 상태를 동기화하는 것이 복잡할 수 있습니다.
'Resource > 네트워크' 카테고리의 다른 글
| [네트워크] 기초 용어 정리 (3) | 2023.11.25 |
|---|
