JavaScript SEO: CSR·SSR·ISR 인덱싱 차이와 대응법

전통적인 HTML 정적 페이지와 달리, JavaScript로 렌더링되는 Single Page Application(SPA)은 구글이 처음 HTTP 응답을 받을 때 의미 있는 콘텐츠를 포함하지 않을 수 있습니다. 구글의 JavaScript 처리는 2단계 파이프라인으로 작동합니다.

이 지연이 문제의 핵심입니다. SSR은 1단계에서 이미 완성된 HTML을 제공하므로 이 문제가 없습니다.

// 1. SSG — 빌드 시 정적 생성 (최고 SEO)
// app/blog/[slug]/page.tsx (기본값: SSG)
export async function generateStaticParams() {
  const posts = await getAllPosts()
  return posts.map(p => ({ slug: p.slug }))
}
export default async function Page({ params }) {
  const post = await getPost(params.slug)
  return <Article post={post} />
}

// 2. ISR — 주기적 재생성
export const revalidate = 3600 // 1시간마다 재생성

// 3. SSR — 요청마다 서버 렌더링
export const dynamic = 'force-dynamic'
// 또는 fetch에서 cache: 'no-store' 사용

// 4. 완전 CSR 피하기 — 검색 가능한 콘텐츠에는 사용 금지
// 'use client' + useEffect로 데이터 로드는 SEO에 위험

기존 React SPA(Create React App 등)를 SSR로 전환하기 어려운 경우, Dynamic Rendering(크롤러에게만 SSR HTML 제공)이나 Prerendering(빌드 시 정적 HTML 생성)으로 SEO를 개선할 수 있습니다.

Cloaking 주의: 크롤러에게만 다른 콘텐츠를 의도적으로 보여주는 것(Cloaking)은 구글 가이드라인 위반입니다. Dynamic Rendering은 기술적 한계에 의한 것이므로 구글이 허용하지만, 내용 자체가 달라서는 안 됩니다.