SPA, SSR vs CSR, SEO

오민석·2021년 4월 22일
0

렌더링
어떤한 웹 페이지 접속 시, 그 페이지를 화면에 그려주는 것

SPA

  • 한개의 페이지를 가진 어플리케이션
  • 서버로부터 처음에만 페이지를 받아오고 이후에는 동적으로 페이지를 구성해서 새로운 페이지를 받아오지 않는 애플리케이션

SSR

  • 전통적인 방식
  • 요청시마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청 방식

장점

  • 초기 로딩 속도 빠름
  • 검색엔진최적화(SEO) 유리

단점

  • 서버 부담 크다

CSR(!=SPA)

  • SPA는 처음에만 페이지를 받아오고 이후에는 받아오지 않는데 이럼에도 데이터가 수정되고 조회되게 하고 싶어서 CSR 나옴
  • 최초 한번 페이지를 서버에서 로딩한 이후 JS를 이용해 동적으로 데이터만 변경하여 화면의 컨텐츠를 바꾸는 방식. 즉 동적으로 DOM을 구성하여 렌더링 되는 화면이 바뀐다
  • 웹에서 제공하는 정보량이 많아지고 데스크탑보다 성능이 떨어지는 모바일에 최적화시키기 위해 등장
  • client에서 view 생성(html 그려줌)

장점

  • 빠른 페이지 전환

단점

  • 초기 로딩 속도 느리다
  • SEO 최적화 아님

SEO

  • 대부분의 웹 크롤러들은 JS를 실행시키지 못하고 HTML에서만 컨텐츠 수집하기 때문에 SPA의 CSR 방식으로 개발 된 페이지를 빈 페이지로 인식한다

0개의 댓글