목차
개요
요즘 Job Description을 보면 프런트엔드 스킬로는 React와 Next.js가 거의 필수다.
그래서 Next.js를 공부하려하는데 Next.js는 SSR이고 SEO를 위해서도 사용한다고 들었다.
‘CSR에서는 SEO가 안되는걸까?’ 부족한 지식을 찾기 위해 정리했다.
CSR (Client Side Rendering)
- 서버에서 페이지를 미리 준비하는 것이 ❌
- 사용자의 브라우저에서 콘텐츠를 동적으로 생성하여 렌더링
- react에서는 id를 root, vue에서는 id를 app을 통해 클라이언트가 동적으로 JS로 HTML을 그림
CSR이 SEO에 불리한 이유는 뭘까?
CSR은 사용자가 웹사이트를 방문하는 순간 HTML, CSS, JS리소스를 브라우저(클라이언트)에 전달한다.
브라우저는 리소스를 사용해 HTML을 파싱하고 렌더링을 준비한다.
이 과정에서 빈 HTML 화면이 표시되는데, 브라우저에서 HTML을 그리는 동안 검색엔진 크롤러는 빈 페이지를 인지하지 못해 SEO에서 불리하다.
🤔 이 순간 ‘빈 페이지여도 정보를 미리 준비해서 크롤러가 읽게 할 수 없나?’ 라는 의문이 생겼다.
Vue나 React 라이브러리에서 직접 대응하는 방식은 알아보지 않았지만, Next.js, Nuxt.js를 이용하면 SSR 방식으로도 CSR로 만든 SPA처럼 웹 페이지 개발이 가능하다고 한다.
검색엔진에 내 사이트를 노출시키려면 사이트에 유익한 정보가 많이 포함되어 있어야 한다.
유익한 정보가 등록되어 있는지 아닌지는 로봇이 돌면서 파악하는데 CSR사이트는 로봇(검색엔진 크롤러)이 돌 때 쯤이면 로딩화면만 가득할 확률이 높다.