[React] SPA, CSR vs SSR, SEO

노호준·2023년 9월 8일
0

SPA

  • 싱글 페이지 어플리케이션, 최초 페이지를 로딩한후 동적으로 데이터만 변경하여 컴포넌트를 바꿈

CSR

  • 클라이언트 사이드 렌더링, 최초에 한번 서버에서 전체 페이지를 로딩하여 보여주고 JS를 이용하여 리소스를 서버로부터 제공받고 클라이언트가 데이터를 렌더링하는 방식 => HTML을 그리는 역할을 클라이언트가 JS로 수행

장점

  • 첫 로딩만 기다린다면 이후부터는 좋은 사용자 경험을 제공
  • 연속된 렌더링으로 인한 과부하를 줄일 수 있음

단점

  • 초기 렌더링 속도가 느림
  • 검색 엔진에 잘 안뜸, 웹크롤러는 JS를 실행못하기 때문

SSR

  • 서버 사이드 렌더링, 서버에서 렌더링을 수행하는 방식

장점

  • 초기 렌더링 속도가 빠름
  • JS를 쓴 렌더링이 아니므로 SEO(검색엔진 잘뜸)가 가능 => HTML에 모든 컨텐츠가 저장되어있음

단점

  • 매범 새로운 페이지를 요청할때마다 새로고침이 발생
  • 간단한 데이터 수정에도 서버를 거쳐야함, 이는 서버의 과부하의 원인이됨

0개의 댓글