목록으로
Network

SSR VS CSR

Dev Park
7/9/2023
30 views

서론

웹 개발에 사용하는 기술에는 대표적으로 SSR과 CSR이 있다.
오늘은 이 두가지 방식에 대해서 알아보고 어떤 차이점이 있는지를 알아보자.

SPA? MPA?

SSR과 CSR에 대해서 설명하기전 알아야하는 개념으로 SPA와 MPA가 있다.

SPA

Single Page Application

하나의 페이지로 이루어진 홈페이지로 데이터를 수정하거나 조회할 때 다른 페이지로 넘어가는 것이 아닌 동적으로 페이지를 구성한다.
하나의 페이지로 이루어져 있기때문에 CSR에 좀 더 적합하지만 SSR방식으로 구현하지 못하는 것은 아니다.

MPA

Multiple Page Application

여러개의 페이지로 이루어진 홈페이지이다.
클라이언트에서 서버에 요청을 보내면 서버에서 렌더링하고 클라이언트에게 응답을 주는 방식인 SSR방식을 사용한다.
SPA와 반대로 새로고침이 발생한다.

CSR

Client Side Rendering

CSR의 구동방식은 초기에 로드시 빈 HTML과 모든 로직이 담겨져 있는 JavaScript를 다운로드한다.
그리고 빈 HTML에 JavaScript를 사용해 Dom을 동적으로 생성하여 그려낸다.
이렇듯 클라이언트에서 렌더링 한다고하여 CSR이다.

CSR의 장점

  1. 서버 부하 감소
  • 초기 페이지가 로드되면 클라이언트 측에서 사이트와의 추가 상호 작용을 완전히 처리할 수 있으므로 서버의 부하가 감소한다.
  1. 페이지 간 원활한 전환
  • 렌더링이 클라이언트 측에서 발생하므로 초기 로드가 완료되면 애플리케이션의 다른 부분 간 탐색이 더 빠르고 원활하게 진행된다.

CSR의 단점

  1. 느린 초기 로드
  • 클라이언트가 페이지를 렌더링하기 시작하면 모든 Javascript를 다운로드하여 렌더링해야하기 때문에 초기 로드 시간은 SSR보다 느리다.
  1. SEO 어려움
  • 콘텐츠가 클라이언트 측에서 렌더링 되기 때문에 검색 엔진 봇이 웹 사이트를 적절하게 인덱싱하는 데 어려움이 있을 수 있다.
  1. CORS의 영향을 더 많이 받음
  • CSR에서는 대부분의 처리가 클라이언트의 브라우저에서 발생하고 이러한 요청은 CORS의 영향을 많이 받는다.
    SSR에서는 서버는 CORS의 대상이 아니므로 'Acess-Control-Allow-Origin' 응답 헤더가 필요하지 않다.

SSR

Server Side Rendering

서버에서 렌더링하여 완성된 HTML 파일을 로드하는 것이다.
클라이언트에서 요청할 때마다 상황에 맞는 HTML파일을 불러와야하기때문에 페이지가 여러 가지일 수밖에 없다.

SSR의 장점

  1. 빠른 초기 로드
  • 페이지를 로드할 때 이미 완성된 HTML 파일을 로드하여 CSR방식보다 더 빠르다.
  1. SEO 친화성
  • 서버가 페이지를 보낼 때 전체 HTML을 준비하여 보내기때문에 봇이 인덱싱을 위해 쉽게 크롤링할 수 있어 SEO에 도움이 된다.
  1. CORS에서 비교적 자유로움
  • SSR에서는 서버는 CORS의 대상이 아니므로 'Acess-Control-Allow-Origin' 응답 헤더가 필요하지 않다.

SSR 단점

  1. 서버 로드
  • 서버 측 렌더링 페이지에 대한 모든 요청은 서버에서 프로세스를 실행하여 다시 보낼 HTML을 생성하므로 서버 로드가 증가하고 더 많은 서버 리소스가 필요로 한다.
  1. 빈번한 서버 요청
  • 사용자가 방문하는 모든 새 페이지는 새로운 HTML을 만들기때문에 서버와의 요청이 빈번하게 일어난다.
    또한 그렇기 때문에 모든 페이지 전환에는 새로운 페이지를 불러와야해 초기 페이지 로드를 제외하고는 CSR방식에 비해 느릴 수 있다.

마치며

결론적으로 SSR과 CSR 중 무엇을 선택해야하는지는 애플리케이션의 특성에 따라 다르다.
초기 로드 시간과 SEO가 우선이라면 SSR이 더 나은 선택 일 수 있다.
반면 서버 로드를 줄이고 초기 페이지 로드 후 사용자에게 더 원활한 경험을 제공하려면 CSR이 더 적합할 것이다.