반응형
SSR과 CSR 이란 무엇이고, 언제 사용하는지 알아보도록 하겠습니다.
SSR (서버 사이드 렌더링) 이란?
SSR의 경우 서버에서 바로 렌더링 할 수 있는 HTML 파일을 만들어서 전달합니다. 그 이후 js 파일을 로드합니다.
장점
- 미리 만들어진 HTML 파일을 가져오기 때문에 검색엔진 최적화에 좋습니다.
- 초기화면 렌더링 속도가 빠릅니다.
CSR (클라이언트 사이드 렌더링) 이란?
CSR은 서버에서 HTML과 자바스크립트를 함께 전달합니다. 자바스크립트가 모두 로드된 이후에 페이지가 로드됩니다.
장점
- 매끄러운 화면 전환
- 사용자 경험 향상
화면 렌더링 방식
SSR (서버 사이드 렌더링)
흰 화면 -> 서버에서 내려준 HTML 렌더링 -> 자바스크립트 파일 로드
CSR(클라이언트 사이드 렌더링)
흰 화면 -> 자바스크립트 파일 로드 -> HTML 파일 렌더링
이렇게 차이가 납니다.
SSR의 경우에는 HTML렌더링이 빠르게 일어나서 사용자가 흰 화면을 보고 대기할 필요가 없게 됩니다.
언제 사용하면 좋을까?
기본적으로 React, Vue 와 같은 라이브러리들은 CSR로 렌더링 되게 됩니다.
하지만 CSR로 렌더링 하게 되면 클라이언트에서 <div> 태그에 렌더링 되게 됩니다.
<div id="app"></div>
검색엔진 크롤러가 봤을 때, 해당 페이지가 어떤 내용인지 파악할수가 없게 됩니다.
이러한 문제점들을 해결하기 SSR 이라는 개념이 필요하게 되었습니다.
검색엔진 최적화가 필요하거나, 빠른 화면을 렌더링해야할 때, SSR을 활용하면 장점이 있습니다.
하지만, 외부에 검색 노출이 필요 없는 관리자 페이지라던지
Client 에서만 사용할 수 있는 라이버러리를 사용 중이게 된다면,
SSR 보다는 CSR을 사용하는 것이 더 좋은 선택일 수 도 있습니다.
728x90
반응형