pile·
프론트엔드·vercel-blogVercel Blog·

How Google handles JavaScript throughout the indexing process

MERJ와 Vercel의 공동 연구팀이 100,000건 이상의 Googlebot 크롤 데이터를 분석해 JavaScript SEO에 대한 4가지 주요 오해를 실증적으로 검증했다. 현대 Googlebot이 React Server Components·스트리밍·CSR을 포함한 모든 HTML 페이지를 완전히 렌더링함을 실측 데이터로 확인했다.

핵심 포인트
  • 100% 렌더링: 100,000건 이상의 요청에서 모든 HTML 페이지가 완전 렌더링됨 (CSR, SSR, RSC 스트리밍 포함)
  • 렌더링 지연: 중앙값 10초, 90th 퍼센타일 ~3시간 — 렌더링 큐가 SEO에 미치는 영향은 예상보다 작음
  • `noindex` 주의: 초기 HTML에 포함된 noindex만 유효, 클라이언트 사이드에서 제거해도 Google은 렌더링 자체를 건너뜀
  • 비렌더링 JS 페이로드 내 링크도 발견: RSC payload 등 비렌더 JS에서도 URL-like 문자열로 링크 수집 (인코딩 URL 제외)
  • 쿼리 스트링이 있는 URL은 렌더링 지연 증가: 90th 퍼센타일 기준 일반 URL ~2.5시간 vs 쿼리 URL ~8.5시간
  • sitemap.xml 정기 업데이트가 렌더링 전략 간 페이지 발견 속도 차이를 상쇄
상세 정리
  • 연구 방법론: Edge Middleware로 봇 요청 감지 + JS beacon으로 렌더링 완료 시점 측정, 37,000건 이상 서버-비콘 매칭
  • Googlebot 버전: 현재 최신 안정 Chrome/Chromium 사용, 2015~2018 구버전 대비 현대 JS 기능 완전 지원
  • 정적 렌더링(무 상태): 쿠키·세션 미유지, 탭 클릭·쿠키 배너 등 상호작용 없음 — 개인화는 stateful 방법으로 구현 필요
  • 자산 캐싱: Google은 HTTP Cache-Control 무시하고 내부 휴리스틱으로 자산 신선도 판단
  • 304 상태 코드: 원본 200 콘텐츠로 렌더링, 3xx/4xx/5xx는 렌더링 안 함
  • RSC 스트리밍: Googlebot이 incremental streaming을 완전히 렌더링, SEO 영향 없음
  • 링크 발견 vs 가치 평가 분리: 발견은 렌더 전에도 가능, 가치 평가는 렌더 완료 후 수행
  • 인코딩된 URL(`https%3A%2F%2F...`): RSC 페이로드에서 발견 안 됨, 일반 형태로 포함해야 수집
  • 크롤 효율성: SSG/ISR > SSR >> CSR 순서
  • 콘텐츠 업데이트 빈도가 렌더링 우선순위에 영향: 자주 변경되는 `/docs` 경로가 더 짧은 렌더링 지연
왜 읽나실측 데이터로 검증된 Googlebot의 렌더링 동작을 이해하면, 막연한 "SSR이 SEO에 좋다"는 통념 대신 실제 크롤 예산과 렌더링 우선순위에 근거한 아키텍처 결정을 내릴 수 있다.
vercel-blog
Vercel Blog 블로그
원문은 여기서 이어서 읽을 수 있어요
원문 읽기
읽음 (0)

이 글과 비슷한

  1. 프론트엔드·LINE EngineeringLINE Engineering·

    AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기

    LINE Planet 팀의 PM과 Android 엔지니어 두 명이 웹 전문 엔지니어 없이 LINE 앱 내에서 그룹 영상 통화 서비스를 개발한 과정을 다룬다. LIFF(LINE Front-end Framework)와 LINE Planet SDK를 활용해 React/Vite 기반 웹 앱을 구성했고, Firebase Cloud Functions로 별도 서버 인프라 없이 구현을 완료했다.

    #react#webrtc#firebase+2
  2. 프론트엔드·vercel-blogVercel Blog·

    Vercel과 Shopify의 Hydrogen 전면 재설계

    Vercel과 Shopify가 Hydrogen을 오픈소스·런타임 무관 프레임워크로 전면 재설계했다. 기존 Hydrogen은 빠른 헤드리스 스토어프런트 배포를 지원했지만 플랫폼 종속성이 있었고, 새 버전은 Svelte, Nuxt, Next.js 등 어느 JavaScript 프레임워크에서도 동작한다. 3레이어 아키텍처(코어/클라이언트/서버)로 재구성하면서 각 레이어가 명확한 역할을 분담한다.

    #react#nextjs#i18n+2
  3. 프론트엔드·토스 SLASH토스 SLASH·

    es-toolkit: 사내 소형 라이브러리에서 글로벌 프로젝트로

    토스 프론트엔드 팀이 사내 공유 유틸리티 라이브러리를 발전시켜 만든 es-toolkit이 주간 npm 다운로드 2,000만 건을 넘기며 글로벌 오픈소스 프로젝트로 자리 잡은 과정을 다룬다. lodash의 구조적 한계를 넘어 현대 웹 개발 환경에 최적화된 유틸리티 라이브러리를 처음부터 설계한 경험을 정리한다.

    #lodash#open-source#tree-shaking+2