SPA의 구글 크롤링 보장: 동적 콘텐츠 인덱싱 및 하이드레이션 전략

전략 개요: CSR에서 SSR/SSG/하이브리드로

핵심 원칙은 간단합니다. “구글이 JS 렌더링을 하지 않아도 이해할 수 있는 HTML을 제공”하세요. 이를 위한 대표 전략:

• SSG(Static Site Generation): 빌드 타임 정적 HTML 생성. 변하지 않는 페이지에 최적.
• SSR(Server-Side Rendering): 요청 시 서버에서 HTML 생성. 자주 변경되는 페이지나 개인화가 제한적인 페이지에 적합.
• ISR(Incremental Static Regeneration): 정적 페이지를 캐시하며 백그라운드 재생성. Next.js 등에서 지원.
• 하이브리드 구성: 랜딩/카테고리/게시글 등 검색 진입이 필요한 경로는 SSR/SSG, 앱 내 전용(로그인 필요) 경로는 CSR.
• (임시) 프리렌더/프록시 렌더링: Puppeteer/Rendertron 등으로 HTML을 생성해 캐시. 빈번한 갱신 페이지엔 관리 비용이 큽니다. 장기 해법은 SSR/SSG 전환입니다.

주의: 과거 “Dynamic Rendering(봇에만 프리렌더 제공)”은 권고되지 않습니다. 불가피한 과도기 해법으로만 사용하고, 반드시 콘텐츠 패리티(사용자/봇 동일 콘텐츠)를 지키세요.

라우팅과 링크 설계: 발견 가능성(Discoverability) 보장

• 히스토리 API 기반의 깨끗한 URL 사용: /products/123 형태로 라우트하고, 해시 라우팅은 피하세요.
• 실제 링크 사용: 탐색 가능한 모든 경로에는 a 태그와 href를 제공하세요.

예시(Next.js/React):

// 잘못된 패턴: onClick만 있고 href가 없음
<button onClick={() => router.push('/products/123')}>자세히</button>

// 권장 패턴: href로 링크를 노출
<a href="/products/123" onClick={(e) => {
  e.preventDefault();
  router.push('/products/123');
}}>
  자세히
</a>

• 무한 스크롤 대안: 가시적인 “다음 페이지” 링크(/category/shoes?page=2)를 제공하고, Sitemap에도 포함하세요. rel="next/prev"는 신호로 사용되지 않지만, 사용자에게도 유용하고 크롤러가 링크를 따라가게 합니다.

메타데이터와 구조화 데이터: 서버에서 출력

• title, meta description, canonical, hreflang, OG/Twitter 카드 등은 SSR/SSG 단계에서 HTML에 포함하세요.
• JSON-LD 구조화 데이터도 동일합니다. 클라이언트 주입만 하면 타임아웃 시 누락됩니다.

Next.js 예시:

import Head from 'next/head';

export default function Post({ post }) {
  const url = `https://example.com/posts/${post.slug}`;
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: post.title,
    datePublished: post.publishedAt,
    dateModified: post.updatedAt,
    author: [{ '@type': 'Person', name: post.author }],
    mainEntityOfPage: url
  };

  return (
    <>
      <Head>
        <title>{post.title} | Example</title>
        <meta name="description" content={post.excerpt} />
        <link rel="canonical" href={url} />
        <meta property="og:title" content={post.title} />
        <meta property="og:url" content={url} />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
        />
      </Head>
      <article dangerouslySetInnerHTML={{ __html: post.html }} />
    </>
  );
}

데이터 패칭: 서버에서 데이터 확보 후 HTML로 전달

• 인증이 필요하거나 CORS 제약이 있는 API 데이터를 클라이언트에서만 불러오면 구글이 보지 못합니다.
• SSR/SSG 단계에서 데이터를 가져와 HTML에 포함하세요.

Next.js SSR 예시:

export async function getServerSideProps({ params }) {
  const res = await fetch(`${process.env.API}/posts/${params.slug}`, {
    headers: { 'x-api-key': process.env.API_KEY }
  });
  if (res.status === 404) {
    return { notFound: true };
  }
  const post = await res.json();
  return { props: { post } };
}

SSG/ISR 예시:

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  return { props: { post }, revalidate: 60 }; // ISR: 60초마다 재생성 가능
}

주의: 실제 404 페이지는 서버에서 404 상태 코드를 반환해야 합니다. 클라이언트에서만 “Not Found”를 표시하는 소프트 404는 피하세요.

하이드레이션 전략: 검색성과 성능을 함께 잡기

SSR/SSG로 서버에서 콘텐츠를 출력하더라도, 과도한 하이드레이션은 성능 저하와 렌더 지연을 유발합니다. 다음 전략으로 JS 하중을 줄이고, 크롤링 안정성을 높이세요.

1) 전체 하이드레이션 vs 선택적/부분 하이드레이션

• 전체 하이드레이션: 페이지 전체를 한 번에 하이드레이트. 단순하지만 번들이 커지면 TTI가 지연됩니다.
• 부분/선택적 하이드레이션(Islands, Progressive): 중요한 콘텐츠만 우선 하이드레이트하거나, 뷰포트/상호작용 시점에 지연 로드.

React/Next.js 부분 하이드레이션 예시:

import dynamic from 'next/dynamic';

const HeavyChart = dynamic(() => import('../components/HeavyChart'), {
  ssr: false, // 서버에는 HTML 스텁만, 클라이언트에서 필요 시 하이드레이트
  loading: () => <div aria-busy="true">차트 로딩 중…</div>
});

export default function ProductPage({ product }) {
  return (
    <>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      {/* 스크롤 아래 무거운 위젯은 지연 하이드레이션 */}
      <section style={{ minHeight: 400, marginTop: 48 }}>
        <HeavyChart />
      </section>
    </>
  );
}

뷰포트 진입 시 하이드레이션 트리거:

import { useEffect, useRef, useState } from 'react';

export function LazyHydrateWidget() {
  const ref = useRef(null);
  const [ready, setReady] = useState(false);

  useEffect(() => {
    const io = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting) {
        setReady(true);
        io.disconnect();
      }
    }, { rootMargin: '200px' });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  return (
    <div ref={ref}>
      {ready ? <InteractiveWidget /> : <Placeholder />}
    </div>
  );
}

상호작용 시점 하이드레이션:

function ExpandOnClick() {
  const [Comp, setComp] = useState(null);

  async function onOpen() {
    const { default: Widget } = await import('./Widget');
    setComp(() => Widget);
  }

  return (
    <>
      <button onClick={onOpen}>상세 보기</button>
      {Comp ? <Comp /> : null}
    </>
  );
}

2) 스트리밍 SSR과 선택적 하이드레이션(React 18+)

스트리밍 SSR은 서버가 중요한 콘텐츠를 먼저 전송하고, 나머지를 차례로 전달합니다. 선택적 하이드레이션으로 상위 콘텐츠를 빠르게 상호작용 가능하게 만들 수 있습니다.

간단 예시(노드 환경):

import { renderToPipeableStream } from 'react-dom/server';
import App from './App';

export default function handler(req, res) {
  let didError = false;
  const { pipe } = renderToPipeableStream(<App url={req.url} />, {
    onShellReady() {
      res.setHeader('Content-Type', 'text/html; charset=utf-8');
      pipe(res);
    },
    onError(err) {
      didError = true;
      console.error(err);
    }
  });
  setTimeout(() => res.destroy(), 10000); // 타임아웃 가드
}

이 기법은 LCP 개선과 렌더 안정성에 크게 기여합니다.

3) Vue/Nuxt에서의 지연 하이드레이션

Nuxt 3에서는 클라이언트 전용 위젯을 로 감싸고, defineAsyncComponent로 지연 로드하는 방식이 일반적입니다.

<script setup>
import { defineAsyncComponent } from 'vue';
const HeavyMap = defineAsyncComponent(() => import('~/components/HeavyMap.vue'));
</script>

<template>
  <h1>{{ title }}</h1>
  <ClientOnly>
    <HeavyMap />
  </ClientOnly>
</template>

동적 콘텐츠 인덱싱: 실전 시나리오별 가이드

블로그/뉴스 게시글

• 본문, 제목, 날짜, 저자, 구조화 데이터(Article/NewsArticle)를 SSR로 출력.
• 댓글 수, 좋아요 수 등은 클라이언트에서 보강하되, 핵심 본문은 반드시 HTML에 포함.
• 변경이 잦으면 ISR로 신선도 유지.

상품 리스트/검색 결과

• 첫 페이지 목록을 SSR/SSG로 출력하고, “더 보기”는 쿼리 파라미터로 주소화(/category/shoes?page=2).
• Faceted 네비게이션(색상, 가격 등)은 기본 카테고리 페이지에 정규화 canonical을 두고, 과도한 조합은 noindex, follow 처리.

<link rel="canonical" href="https://example.com/category/shoes" />
<meta name="robots" content="noindex,follow" />

• 필수 필터(베스트/신상 등)만 인덱싱 허용하고, 나머지는 크롤 예산을 낭비하지 않도록 통제.

다국어/다지역

• 각 언어·지역 버전의 URL을 분리하고, hreflang과 x-default를 SSR로 삽입.

<link rel="alternate" href="https://example.com/ko/page" hreflang="ko" />
<link rel="alternate" href="https://example.com/en/page" hreflang="en" />
<link rel="alternate" href="https://example.com/en/page" hreflang="x-default" />

로그인 필요 콘텐츠

• 구글은 인증을 통과하지 않습니다. 인덱싱 대상이 아니라면 robots meta로 noindex 처리하거나, gated 라우트는 sitemap에서 제외하세요.
• 공개 요약 페이지(프리뷰)를 별도 공개 URL로 제공해 검색 진입 동선을 설계할 수 있습니다.

사이트맵, robots.txt, 캐노니컬: 크롤링 제어의 기본