[SSR] SEO (검색엔진 최적화 with Nuxt)

1. SEO 과정

1) 크롤링 : 웹 크롤러를 이용하여 웹 페이지 정보를 가져옵니다. 웹 크롤러는 사이트를 방문한 다음 모든 링크를 타고 다니며 새로운 페이지들의 정보를 수집합니다. 텍스트만 읽기 때문에 이미지, 동영상 정보는 읽을 수 없습니다. (alt text요소 추가 필요) 

2) 인덱싱 : 웹 크롤러가 수집한 정보를 구글 검색 색인에 저장합니다. 검색엔진에 의해 색인이 완료되면 검색 결과에 노출될 수 있습니다. 

3) 랭킹 : 검색엔진은 사용자가 검색하는 키워드를 색인 내에서 가장 일치하는 페이지를 찾아 검색 결과에 노출 시킵니다. 이때 각 검색 엔진의 알고리즘에 따라 페이지들의 순위를 매깁니다. 일반적으로 HTML title, meta description 태그를 사용해야 검색 주제와 콘텐츠에 적합한 관련 페이지로 인식하여 결과에 노출될 수 있으며, 또한 타 페이지 링크횟수, 클릭 수, 트래픽 등이 랭킹에 영향을 주는 요소가 됩니다. 

2. 검색 엔진

SSR의 경우 서버에서 모든 콘텐츠를 만들어 응답하기 때문에 SEO에 유리합니다. 하지만 최근에는 구글을 비롯한 Bing, 네이버 등의 서비스가 Javascript 크롤링을 지원하기 때문에 CSR 서비스 또한 구글 검색 결과에 노출 될 수 있습니다.

다만 현재까지는 구글 검색엔진 봇 - GoogleBot이 자바스크립트 크롤링을 할 때는 페이지 내 이벤트로 발생되는 렌더링이 있는 경우에는 인덱싱을 하지 않는 부분과, 웹 사이트를 크롤링하고 렌더링하는데 소요되는 시간 문제로 인해 페이지 색인 생성에 지연이 있을 수 있습니다.

크롤링 정책은 서비스마다 다르지만 앞서 말씀드린 것처럼 구글을 포함한 주요 검색포털 서비스에서 Javascript 크롤링을 지원하고 있습니다. 최근 SEO를 위한 SSR 사용할 필요성은 상대적으로 줄어들었지만, 여전히 SSR이 초기 로딩 속도가 빠르고 검색 엔진 크롤러에게 콘텐츠를 빠르게 노출시키는 데 도움을 준다는 장점 때문에 SSR을 사용합니다.

3. 검색엔진 최적화 효율

1) 동적 렌더기 사용

동적 렌더기는 사용자 에이전트 정보에 따라 검색엔진봇이 크롤링하기 쉽도록 정적 HTML로 변환하여 응답하는 미들웨어 입니다. 동적 렌더기는 puppleteer, rendertron, prerender.io가 있습니다. 동적 렌더기 사용은 임시방편으로 안내하는데, 시간이 지날수록 각 검색엔진 크롤러가 발전함에 따라 점점 더 동적 페이지를 잘 처리하고 인덱싱 할 수 있을 것이기 때문입니다. 

2) Hybrid Rendering

모든 페이지를 SSR을 적용한다면 서버 과부화, 대량의 콘텐츠를 포함한 페이지의 로딩속도 등의 문제가 발생될 수 있습니다. 따라서 동적으로 사용자 액션에 따라 콘텐츠를 렌더링하는 페이지는 CSR로 구현하고, 홈페이지, 랜딩페이지, 블로그 글 등 검색엔진에 노출할 정적 콘텐츠 페이지는 SSR로 구현하여 적용할 수 있습니다. 이렇게 하면 초기 렌더링 속도는 유지하면서 사용자 Action으로 인한 페이지 이동시에도 빠른 페이지 렌더링을 기대할 수 있습니다. 

// nuxt.config.ts

export default defineNuxtConfig({
  routeRules: {
    // prerender : 빌드 시 해당 경로를 사전 렌더링하고 정적 자산으로 빌드에 포함합니다.
    '/': { prerender: true },
    // SSR을 비활성화하고 SPA(CSR) 전용으로 만듭니다.
    '/admin' : { ssr: false }
  }
})

3) SSR with Hydration (Nuxt - Universal Rendering)

Nuxt의 Universal 모드는 초기 렌더링되는 화면은 SSR로 구현(pre-rendering HTML)하고 이후 Javascript 속성(이벤트 리스너 등)은 이미 렌더링이 완료된 기존 Dom tree에서 해당하는 요소에 부착하여 SPA로 동작시키는 방법입니다. Pre-rendering 된 초기 페이지는 검색엔진봇이 크롤링 할 수 있게 함과 동시에 기존 SPA와 동일한 동작과 반응성을 보장할 수 있게 합니다.

 

Nuxt - Mode

1) spa :  CSR(Vue)로 빌드되는 모드

2) universal : server-side rendering + client-side navigation방식으로, 페이지 이동 시의 깜박거림이 일어났던 SSR의 문제점에 대해서 초기화면만 SSR로 렌더링시키고 이후에는 CSR방식으로 동적 렌더링을 합니다. 

 - client-side navigation은 Pre-fetch + Hydration 과정으로 구성됩니다. pre-fetch는 Nuxt의 nuxt-link(vue의 router-link와 동일)를 통해 다음페이지를 예측하여 백 그라운드에서 Chunk js파일을 미리 다운로드(pre-fetch) 합니다. pre-fetch로 인하여 페이지 이동 시에 깜박임 없이 렌더링 시킨 뒤 이후 Hydration 과정을 거쳐 페이지 렌더링이 완료됩니다. 

export default defineNuxtConfig({
  mode: 'universal'
})

* Nuxt - edge-side rendering Demo 사이트
https://shift.nuxt.workers.dev

 

 

참고사이트

https://hypemarc.com/seo-crawling-indexing

https://web.dev/rendering-on-the-web/?hl=ko

https://developers.google.com/search/docs/crawling-indexing/javascript/dynamic-rendering?hl=ko

https://nuxt.com/docs/guide/concepts/rendering#universal-rendering