SSR과 CSR의 이해

SSR 과 CSR

SSR(Server-Side-Rendering)

• 서버에서 모든 데이터를 미리 출력해 브라우저에 전달하는 기법이다.

장점

1. 초기 구동 속도: 서버에서 모든 구성 요소가 렌더링되어 오기 때문에 첫 화면을 빠르게 보여줄 수 있다.
2. 검색 엔진 최적화 (SEO): 모든 데이터가 담겨져 있기 때문에 검색엔진이 콘텐츠 파악에 용이하여 SEO(검색 엔진 최적화)에 유리하다
3. 소셜 미디어 공유: 페이지의 메타 데이터를 미리 설정할 수 있어, 콘텐츠 공유시 더 나은 미리보기를 제공할 수 있다는 장점도 존재한다.

단점

1. 서버 부하: 모든 처리를 서버에서 진행하므로 서버의 부하가 상대적으로 커진다.
2. 실시간 상호작용의 제한: 페이지와 상호작용시 서버와 통신이 필요하기 때문에 실시간 반응이 느려진다.

CSR(Client-Side-Rendering)

• 클라이언트에서 기본적인 html 구조 및 js를 받은 이후 js를 실행하여 데이터를 채워 넣는 방식이다.

장점

1. 서버 부하 최소화: 초기 로드 이후 렌더링은 클라이언트 측에서 이루어지므로 서버 부하가 적다.
2. 사용자 경험: 클라이언트 측에서 모든 계산이 이루어져 즉각적인 반응을 통해 동적인 상호작용과 부드러운 페이지 전환이 가능하다. 이를 통해 사용자 경험을 개선 할 수 있다.
3. 캐싱과 오프라인 기능: 클라이언트에 콘텐츠를 캐시하고, 서비스 워커를 통해 오프라인에서도 에플리케이션 서비스가 가능하다.

단점

1. 초기 로딩 지연: 모든 자바스크립트가 로드되어 실행될 때까지 기다려야하므로 초기 로딩이 느려진다.
2. 검색 엔진 최적화 문제: 검색 엔진의 크롤링봇이 랜더링된 콘텐츠를 제대로 인덱싱하지 못할 수 있어 SEO에 불리하다.
3. 자바스크립트 의존도: 사용자의 브라우저 상황에 따라 자바스크립트의 기능을 완전히 지원하지 않는 경우가 있어, 사용자에 따라 콘텐츠를 볼 수 없는 경우가 생긴다.

따라서 콘텐츠에 특성에 따라 적합한 방식을 채택하는 것이 중요하며, 두 가지를 혼합하여 개발하는 방식 또한 존재한다.