SSR, CSR, SPA

🌺 서버 사이드 렌더링(SSR)

웹 페이지의 렌더링이 서버 측에서 일어나는 것을 의미합니다.
웹 서버에 요청할 때마다 브라우저 새로고침이 일어나고, 서버에 새로운 페이지에 대한 요청을 하는 방식입니다.

 

장점

• 초기 로딩 속도가 빠르기 때문에 사용자가 컨텐츠를 빨리 볼 수 있습니다.
• 모든 검색엔진에 대한 SEO(검색 엔진 최적화)가 가능합니다.

단점

• 매번 페이지를 요청할 때마다 새로고침 되기 때문에 CSR에 비해 페이지 구성 속도가 늦습니다.
• 서버에 매번 요청을 하기 때문에 트래픽, 서버 부하가 커집니다.

🌺  클라이언트 사이드 렌더링(CSR)

React, Vue 등의 SPA(Single Page Application)에서 쓰이는 기법으로 클라이언트에서 화면을 구성하는 것을 의미합니다.
즉, 웹 페이지의 렌더링이 클라이언트 측에서 일어납니다.
웹 페이지를 최초로 불러올 때만 HTML, JavaScript, CSS 등을 요청하고 그 후에는 필요한 데이터만 요청합니다.

 

장점

• 필요한 데이터만 갱신하면 되기 때문에 서버에 요청하는 횟수가 적어 서버 부하가 적습니다.

단점

• 초기 진입 속도가 느려서 SEO(검색 엔진 최적화)의 문제가 발생할 수 있습니다.

🌺  싱글 페이지 애플리케이션(SPA)

하나의 페이지에서 실행된다는 뜻으로, 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션 또는 웹 사이트입니다.

 

장점

• 트래픽의 감소
• 속도 · 사용성 · 반응성의 향상

단점

• 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한번만 다운로드 하기 때문에 초기 구동 속도가 상대적으로 느립니다.
• SEO(검색 엔진 최적화)문제
  Angular 또는 React 등의 SPA 프레임워크는 서버 렌더링을 지원하는 SEO 대응 기술이 이미 존재하고 있어 SEO 대응이 필요한 페이지에 대해서는 선별적 SEO 대응이 가능합니다.

🌺  SSR과 CSR의 구별 방법

개발자도구(F12)를 통해 확인이 가능합니다. SSR이라면 완성형 또는 HTML이 보입니다.

CSR과 SSR의 단점을 해결한 Next.js

Next.js는 리액트의 SSR을 쉽게 구현해주는 프레임워크입니다.
SEO(검색 엔진 최적화)의 문제점도 해결하고 CSR 방식처럼 필요한 데이터만 갱신해서 서버의 부하도 줄일 수 있습니다.