레거시 SPA를 위한 Dynamic Rendering (Prerender.io) 우회 기법

Dynamic Rendering(동적 렌더링)이란 동일한 URL에 대해 사용자에게는 기존 CSR(SPA) 페이지를, 검색엔진 크롤러에게는 사전 렌더링된 정적 HTML을 제공하는 기법입니다. Google 공식 문서에서 "workaround(우회책)"으로 분류하며, SSR/SSG로의 전환이 어려운 레거시 SPA를 위한 임시 솔루션으로 권장합니다.

핵심 개념

• User-Agent 감지: 웹 서버(Nginx, Cloudflare Workers 등)에서 요청의 User-Agent를 검사하여 Googlebot, Bingbot 등 크롤러인지 판별
• 크롤러 → 사전 렌더링된 HTML: 크롤러 요청이면 Headless 브라우저(Puppeteer, Chromium)로 SPA를 미리 렌더링한 HTML 스냅샷을 반환
• 사용자 → 기존 SPA: 일반 사용자 요청이면 기존 CSR 그대로 응답

Dynamic Rendering ≠ 클로킹(Cloaking)

클로킹은 사용자와 크롤러에게 다른 콘텐츠를 보여주는 것으로 Google 가이드라인 위반입니다. Dynamic Rendering은 동일한 콘텐츠를 다른 형식(CSR vs 정적 HTML)으로 전달하는 것이므로 클로킹이 아닙니다.

단, Google은 Dynamic Rendering을 "장기적 솔루션이 아닌 임시 대안"이라고 명시합니다. 가능하다면 SSR/SSG로 전환하는 것이 정석입니다.

Prerender.io는 가장 널리 사용되는 Dynamic Rendering SaaS 서비스입니다. 별도의 서버 구축 없이 미들웨어 하나로 설정할 수 있습니다.

동작 원리

1. Prerender.io 미들웨어가 요청의 User-Agent를 검사
2. 크롤러 요청이면 Prerender.io 클라우드 서버로 요청 프록시
3. Prerender.io가 Headless Chrome으로 SPA를 렌더링
4. 렌더링된 HTML을 캐시하고 크롤러에게 응답
5. 다음번 같은 URL 요청 시 캐시에서 즉시 응답

Express.js에서 Prerender.io 적용

// server.js
const express = require('express');
const prerender = require('prerender-node');
const path = require('path');

const app = express();

// Prerender.io 미들웨어 설정
app.use(prerender.set('prerenderToken', process.env.PRERENDER_TOKEN));

// 정적 파일 서빙 (React 빌드 결과물)
app.use(express.static(path.join(__dirname, 'build')));

// SPA Fallback: 모든 경로에서 index.html 반환
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(3000);

Nginx에서 Prerender.io 적용

server {
    listen 80;
    server_name example.com;
    root /var/www/app/build;

    location / {
        # 크롤러 User-Agent 감지
        set $prerender 0;
        if ($http_user_agent ~* "googlebot|bingbot|yandex|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
            set $prerender 1;
        }

        # 크롤러이면 Prerender.io 서버로 프록시
        if ($prerender = 1) {
            rewrite .* /https://$host$request_uri? break;
            proxy_pass https://service.prerender.io;
            proxy_set_header X-Prerender-Token YOUR_TOKEN;
        }

        # 일반 사용자이면 SPA 서빙
        try_files $uri /index.html;
    }
}

Prerender.io 요금 및 특징

Puppeteer 기반 Pre-render 서버

// prerender-server.js
const express = require('express');
const puppeteer = require('puppeteer');

const app = express();
let browser;

// 브라우저 인스턴스 초기화
(async () => {
  browser = await puppeteer.launch({
    headless: 'new',
    args: ['--no-sandbox', '--disable-setuid-sandbox'],
  });
})();

app.get('/render', async (req, res) => {
  const { url } = req.query;
  if (!url) return res.status(400).send('URL required');

  try {
    const page = await browser.newPage();
    await page.goto(url, { waitUntil: 'networkidle0', timeout: 10000 });

    // 완전히 렌더링된 HTML 추출
    const html = await page.content();
    await page.close();

    // 크롤러에게 응답
    res.set('Content-Type', 'text/html');
    res.send(html);
  } catch (error) {
    res.status(500).send('Render failed');
  }
});

app.listen(3001, () => console.log('Pre-render server on :3001'));

Rendertron: Google 공식 오픈소스

Rendertron은 Google Chrome 팀이 만든 오픈소스 Dynamic Rendering 솔루션입니다. Docker로 쉽게 배포할 수 있습니다.

# Docker로 Rendertron 배포
docker pull nickreese/rendertron
docker run -p 3001:3000 nickreese/rendertron

# 렌더링 요청
# GET http://localhost:3001/render/https://example.com/page

자체 구축 vs SaaS 비교

Cloudflare Workers 활용

Cloudflare Workers는 CDN 엣지에서 실행되므로 User-Agent 감지와 프록시를 극도로 빠르게 처리합니다.

// cloudflare-worker.js
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

const BOT_AGENTS = [
  'googlebot', 'bingbot', 'yandex', 'baiduspider',
  'twitterbot', 'facebookexternalhit', 'slackbot',
  'linkedinbot', 'pinterestbot', 'discordbot',
];

async function handleRequest(request) {
  const ua = (request.headers.get('User-Agent') || '').toLowerCase();
  const isBot = BOT_AGENTS.some(bot => ua.includes(bot));

  if (isBot) {
    // Prerender 서버로 프록시
    const prerenderUrl = `https://service.prerender.io/${request.url}`;
    return fetch(prerenderUrl, {
      headers: {
        'X-Prerender-Token': PRERENDER_TOKEN,
      },
    });
  }

  // 일반 사용자 → 원본 서버
  return fetch(request);
}

Vercel Edge Middleware 활용

// middleware.ts (Next.js / Vercel)
import { NextRequest, NextResponse } from 'next/server';

const BOT_PATTERN = /googlebot|bingbot|yandex|baiduspider|twitterbot|facebookexternalhit|slackbot/i;

export function middleware(request: NextRequest) {
  const ua = request.headers.get('user-agent') || '';

  if (BOT_PATTERN.test(ua)) {
    // 크롤러이면 프리렌더 서비스로 리라이트
    const prerenderUrl = new URL(
      `/render/${request.url}`,
      'https://your-prerender-server.com'
    );
    return NextResponse.rewrite(prerenderUrl);
  }

  return NextResponse.next();
}

Edge 기반 Dynamic Rendering의 장점

• 초저지연 User-Agent 감지: CDN 엣지에서 판별하므로 Origin 서버 부하 없음
• 전역 분산: 전세계 어디서 크롤링해도 가장 가까운 엣지에서 처리
• 기존 인프라 무변경: SPA 서버 코드를 전혀 수정하지 않고 앞단에서 처리

캐시 전략

Dynamic Rendering SEO 최적화 체크리스트

1. 메타 태그 완전성 검증
   • 렌더링된 HTML에 올바른 <title>, <meta description>, OG 태그가 포함되는지 확인
   • SPA의 react-helmet 등이 렌더링 완료 후 메타 태그를 올바르게 삽입하는지 테스트
2. 렌더링 대기 시간 최적화
   • Puppeteer의 waitUntil: 'networkidle0' 설정으로 모든 네트워크 요청 완료 후 HTML 추출
   • 불필요한 리소스(광고 스크립트, 분석 태그) 차단하여 렌더링 속도 향상
3. HTTP 상태 코드 전달
   • SPA에서 404 페이지를 보여줄 때 프리렌더러도 404 상태 코드를 반환해야 함
   • 301/302 리다이렉트도 프리렌더러가 올바르게 전달해야 함
4. canonical 태그 일관성
   • 사용자에게 보이는 CSR 페이지와 크롤러에게 보이는 사전 렌더링 HTML의 canonical URL이 동일해야 함
5. JavaScript 에러 모니터링
   • SPA의 JS 에러가 렌더링을 방해하면 크롤러에게 빈 HTML이 전달됨
   • Sentry 등으로 프리렌더링 서버에서 발생하는 에러를 모니터링

Dynamic Rendering의 한계와 전환 시점