왜 CSR(Client Side Rendering)에서 SEO가 단점일까?

 

21.12.29 meta 태그 관련 내용 일부 수정 
21.12.29 ~ 
정확하지 않은 내용 업데이트중....

 

만약 SPA, CSR, SSR에 대해서 모르신다면 아래 정리된 글을 읽어보시기 바랍니다!

SPA 그리고 SSR과 CSR

 

간략 정리

React나 Vue는 SPA(Single Page Application)로 웹 앱으로 만들기 위한 라이브러리, 프레임워크다. SPA의 주요 장점은 다음과 같다.

• 웹 앱처럼 사용자의 경험을 좋게 만들기 위해서다.
• 최초 한번 페이지를 로딩한 이후 JS를 이용해 동적으로 데이터만 변경하여 화면의 콘텐츠를 바꾸는 방식의 웹 애플리케이션.
• 웹에서 제공하는 정보량이 많아지고 데스크탑보다 성능이 떨어지는 모바일에 최적화시키기 위해 등장.
• 서버는 단지 JSON 파일만 보내주는 역할을 수행하며 HTML을 그리는 역할은 클라이언트에서 JS로 수행한다. 그리고 이러한 방식이 CSR이다.

 

🤔 궁금하게 된 이유?

React 프레임워크인 Next.js를 학습하면서 왜 사람들이 Next.js를 쓰는지 이유를 알게 됐다. 가장 주된 이유는 SSR 환경을 편리하게 설정해주고, SEO 최적화에 장점을 가진다는 이유였다. React에서는 SSR 환경설정이 꽤나 복잡하기 때문에 프레임워크를 쓰는 것이 편리하다. 그러던 중 궁금한 것이 생겼다.

처음에 CSR 관련 글들을 찾아보면서 왜 CSR 방식에서 SEO가 단점이라 하는지 궁금했다... 왜냐하면 SPA여도 페이지에 meta 태그들을 넣어줄 수 있지 않은가? 그런데 왜 SEO가 단점이라고 할까? 처음에는 만약 20개 이상의 자바스크립트 뷰가 존재한다면, 모든 뷰의 meta 태그를 하나의 HTML에 입력해주기 어렵기 때문이라고 생각했다. 가독성이나 효율성의 문제가 있기에 단점이라 말하는 거라 생각했다. 21.12.29

 

하지만 내가 검색한 대부분의 포스팅 글에서는 HTML만을 파싱 하는 검색 엔진에는 노출이 되지 않는다거나, 검색엔진이 자바스크립트 기반이 아니기 때문에 SEO가 어렵다고 설명했다. 내가 궁금한 것은 meta태그를 통해 해결할 수 있지 않을까? 였는데 이해가 안 가는 설명들을 봐서 검색을 해보게 됐다.

혹시 몰라서 기존의 CRA로 생성한 React 프로젝트에서 실행하고 자바스크립트 동작을 멈춰봤다. 그리고 HTML 파일에 head가 입력이 되는지 확인해봤다. 자바스크립트 동작을 멈춰 화면 렌더링이 되지는 않지만, 아래 그림처럼 SPA HTML의 meta태그들은 넘어오는 것을 확인할 수 있었다.

 

 

그렇게 해당 문제로 구글링을 하던 중 SEO 관련 글을 보게 됐다. 해당 부분의 글을 아래에 복사했다. 아래 글에 따르면 검색 엔진이 자바스크립트 기반이 아니더라도 meta 태그를 활용해 CSR방식에서 SEO를 잘 지원하게 만들 수 있지 않을까?

 

SEO

렌더링 퍼포먼스 외적인 측면도 다루었다. 흔히 많이들 하는 오해가 CSR은 SEO가 잘 되지 않는다라는 것인데, 많은 크롤러들이 JavaScript를 지원하지 않기 때문에 발생한 오해다. Google Bot(크롤러)은 JavaScript를 지원하기 때문에 CSR 사이트도 SEO가 잘 된다. 특히, 최신 버전의 Google Bot은 ES2015 이상의 최신 JavaScript도 지원한다. 또한 Full SSR 없이도 메타 태그들을 잘 활용하면 SEO를 잘 지원할 수 있다.

 

이 글을 읽고 나서 네이버의 검색엔진에 대해서도 찾아보게 됐다. 아래와 같다.

• SPA 기반으로 제작된 사이트의 수집 및 색인을 지원한다. 즉, 자바스크립트 기반은 아니지만 SPA 검색을 지원한다. 

네이버의 검색엔진

대부분의 웹 사이트는 사용자 경험을 향상하기 위해서 자바스크립트를 사용하고 있습니다. 최근에는 자바스크립트 기술이 발전됨에 따라서 많은 개발자들이 사이트 구축 시 Angular, React, Vue.js 등의 프레임워크를 도입하여 웹을 싱글 페이지 애플리케이션 (SPA) 플랫폼 기반으로 전환하고 있습니다. 물론, 네이버 웹사이트 검색에서도 이러한 트렌드를 고려하여 SPA 기반으로 제작된 사이트의 수집 및 색인을 지원하고 있습니다.
SPA 사이트의 경우 자바스크립트가 웹 페이지의 구조 결정에 주도적인 역할을 하기 때문에 네이버 검색로봇도 수집 및 콘텐츠 해석 과정에서 자바스크립트의 영향도를 측정하고 해석합니다. 이러한 일련의 과정은 전통적인 HTML 페이지의 해석보다 몇 배 이상의 리소스가 필요한 작업입니다. 그러므로 SPA 사이트라도 HTML의 주요 영역 생성은 검색로봇이 잘 인식할 수 있도록 서버에서 렌더링 (Server Side Rendering)을 처리하는 것을 권장합니다.
본 가이드는 네이버 검색로봇이 수집된 HTML 내에 포함되는 자바스크립트를 어떻게 처리하는지를 설명합니다. SPA 방식으로 사이트를 구축하는 경우 본 가이드의 내용을 참고하여 자바스크립트 검색 최적화를 진행하시기 바랍니다.

 

😃 총 정리

결론은 CSR은 SEO가 잘 되지 않는다는 것은 오해이다.

• SPA에서는 클라이언트 단에서 JS로 페이지를 렌더링 한다. 때문에 구글처럼 검색엔진이 자바스크립트 기반(V8)이라면 CSR 방식으로도 SEO 최적화가 가능하다.
• 네이버의 검색엔진도 SPA 사이트의 수집 및 색인을 지원하고 있다. 다만 자바스크립트 기반이 아니기에 JS의 영향도를 기반으로 조사한다. 이는 리소스가 많이 들어가는 작업이라 네이버에서는 SSR을 권장하고 있다. HTML의 meta태그를 통해서도 해결할 수도 있다. 21.12.29 
• CSR, SSR을 비교했을 때는 CSR이 SEO의 단점을 가진 것이 맞았다. 하지만 나는 다른 분들의 글을 보면서 CSR이 SEO가 안 되는 것으로 이해해버렸다.

 

 

혹시 틀리거나 잘못된 내용은 댓글로 알려주시면 감사하겠습니다. :)

 

 

 

📕 Reference:

https://velog.io/@ru_bryunak/SPA-%EC%82%AC%EC%9A%A9%EC%97%90%EC%84%9C%EC%9D%98-SSR%EA%B3%BC-CSR

https://velog.io/@ksh4820/SPA-CSR%EA%B3%BC-SSR-SEO

https://searchadvisor.naver.com/guide/seo-advanced-javascript

https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=ko

https://krpeppermint100.medium.com/web-seo-ssr-csr-82f9b7e42e21