귀사 웹사이트가 React, Vue, Angular 같은 SPA(Single Page Application)로 구축되어 있다면, 이 글을 주의 깊게 읽어야 합니다. AI 검색 크롤러가 귀사 사이트를 거의 읽지 못하고 있을 가능성이 높습니다.
AI 크롤러는 어떻게 사이트를 읽는가
GPTBot(ChatGPT), PerplexityBot, Claude-Web 같은 AI 크롤러는 기본적으로 URL에 HTTP 요청을 보내고 반환된 HTML을 읽습니다. JavaScript를 실행하지 않습니다 — 또는 실행하더라도 시간 제한이 있어 SPA의 동적 렌더링을 기다리지 않습니다.
React SPA에서 무슨 일이 일어나는가
React SPA로 만들어진 사이트에 크롤러가 접근하면 이런 HTML을 받습니다:
<!DOCTYPE html><html><head><title>My App</title></head><body><div id="root"></div><script src="/static/js/main.abc123.js"></script></body></html>
콘텐츠가 없습니다. 모든 텍스트, 서비스 설명, 성공사례, 블로그 포스트는 JavaScript 번들(main.abc123.js) 안에 들어 있습니다. AI 크롤러는 이 번들을 실행하지 않으니 콘텐츠를 읽을 수 없습니다.
얼마나 많은 사이트가 이 문제를 갖고 있나
인테솔코리아가 진단한 기업 사이트의 약 60%가 SPA 구조로 AI 크롤러에 비가시 상태였습니다. IT·스타트업 섹터는 이 비율이 80%까지 올라갑니다. 많은 경우 "SEO를 신경 쓰고 있다"고 하지만 기존 구글 SEO 크롤러(Googlebot)는 JavaScript 렌더링을 지원하므로 이 문제를 인식하지 못하는 경우가 많습니다.
해결책: 세 가지 옵션
옵션 1 — SSG로 전환 (권장)
Astro, Next.js(SSG 모드), Gatsby 등으로 전환해 모든 페이지를 빌드 타임에 정적 HTML로 생성합니다. 가장 완전한 해결책이며, 페이지 로드 속도도 크게 향상됩니다.
옵션 2 — SSR 적용
Next.js의 getServerSideProps, Nuxt.js 등을 활용해 서버에서 HTML을 렌더링해 내려줍니다. 실시간 데이터가 필요한 경우 적합합니다.
옵션 3 — 프리렌더링 서비스
Prerender.io 같은 서비스를 사용해 봇에게만 사전 렌더링된 HTML을 제공합니다. 임시방편으로 사용할 수 있지만 완전한 해결책은 아닙니다.
Next.js를 쓰고 있다면 안전한가
Next.js라도 설정에 따라 다릅니다. getStaticProps 또는 generateStaticParams를 사용한 SSG 모드라면 안전합니다. 그러나 클라이언트 사이드 데이터 페칭(useEffect + fetch)에 의존한다면 동일한 문제가 발생합니다.
즉시 확인하는 방법
브라우저에서 귀사 사이트를 열고 JavaScript를 비활성화해 보세요(Chrome: 개발자도구 → Settings → Disable JavaScript). 콘텐츠가 보이지 않는다면 AI 크롤러도 같은 경험을 하고 있습니다.
또는 curl로 직접 확인할 수 있습니다:
curl -s https://yoursite.com | grep -o '<p[^>]*>[^<]*</p>' | head -5
결과가 비어 있다면 SPA 문제가 있습니다.