반응형
CSR(Client Side Rendering) : 클라이언트 사이드 렌더링
CSR은 자바스크립트를 사용하여 브라우저에서 직접 페이지를 렌더링 하는 방식
SPA는 클라이언트 사이드 렌더링이지만 SPA === CSR은 아니다. SPA를 구현하는 방식이 CSR이다.
CSR 장점
- 동적 콘텐츠가 포함된 페이지를 만들기에 적합하다.
- 웹 애플리케이션에 필요한 모든 소스를 최초 한 번에 다운로드하기 때문에 새 페이지로 이동해도 페이지 갱신에 필요한 데이터만 전달받아 업데이트한다.
CSR 단점
- 규모가 커질수록 유저가 화면을 보기까지 오랜 시간이 걸린다.
- HTML 파일의 body 부분이 비어있기 때문에 SEO에 적합하지 않다.
SSR(server side rendering) : 서버 사이드 렌더링
SSR은 서버에서 웹페이지를 생성하는 방식
서버에서 렌더링된 페이지를 클라이언트로 보내고, 클라이언트의 자바스크립트 번들이 SPA의 작동을 대신하는 방식이다.
SSR 장점
- 페이지가 로드되는 즉시 콘텐츠가 나타나기 때문에 유저에게 빠르게 보여줄 수 있다.
- HTML에 모든 정보가 담겨 SEO에 유리하다.
SSR 단점
- 클릭때마다 서버에 데이터를 요청하기 때문에 과부하가 걸릴 수 있다.
- 캐싱에 복잡한 구성이 많이 필요하다.
SSG(Static Site Generation) : 정적 사이트 생성
SSG는 웹사이트의 모든 페이지를 미리 렌더링 하고 요청에 따라 꺼내 쓰는 방식
SSG 장점
- SEO 최적화에 유리하다.
- 이미 렌더링 되어있기 때문에 가장 빠른 형식의 웹 페이지이다.
SSG 단점
- 빌드 시점에서 전체를 렌더링 하기 때문에 콘텐츠가 자주 업데이트되는 웹사이트에서는 비효율적이다.
Reference
반응형
댓글