SSR-CSR-SEO

Jeane·2021년 2월 16일
0

SSR

Server Side Rendering

  • 서버에서 페이지 렌더링 후 보여줌

장점

  • Initial Load가 빠름
  • 정적인 사이트에 적합함
  • JS에 dependency가 없음
  • SEO를 위한 크롤링이 쉬움

단점

  • 모든 페이지가 리로드 됨 (서버 로드를 증가시키고 불필요한 컴퓨팅)

CSR

Client Side Rendering

  • 클라이언트에서 HTML을 그림

장점

  • 앱과 같은 경험을 제공하기에 좋음
  • JS 라이브러리에 최적화
  • 처음 로드된 후 다른 페이지로의 로드 시간이 짧음

단점

  • Initial load가 느림
  • SEO 문제
  • API 응답 지연

SEO

  • SEO를 위한 최적화는 필수임 웹페이지는 검색 엔진에 적합한 메타 데이터를 반영해야 함 (Google과 같은 검색 엔진은 자동화 된 봇을 통해 메타 데이터를 크롤링)
  • CSR을 사용할 때 콘텐츠는 JS를 통해 생성함 이는 한 페이지에서 다른 페이지로 메타 데이터를 변경할 때 JS에 의존하고 있다는 걸 의미함 플러그인이나 라이브러리 모듈을 사용하여 각 페이지에 대한 메타 데이터를 설정하여 클라이언트 측에서 렌더링 되도록 해야 함
  • SSR을 사용하면 전체 페이지가 메타 데이터로 컴파일 됨 최종 HTML 컨텐츠를 수신하면 프론트 엔드로 전송됨 이 방법은 검색 엔진 크롤러가 JS 사용을 허용하는지 여부에 관계없이 페이지 메타 데이터가 정확한 상태를 유지하도록 함
  • 즉 SSR이 더 SEO-friendly 함
  • 그러나 구글 봇이 JS도 지원하기 때문에 CSR도 괜찮다고 하지만 잘 모르겠음

0개의 댓글