SSR/SSG实施
服务端渲染与静态生成让AI爬虫即取即得

JavaScript渲染对AI爬虫的阻碍

现代企业网站大量使用React、Vue、Angular等前端框架构建单页应用（SPA），页面内容由JavaScript在客户端动态渲染。然而，AI搜索引擎爬虫对JavaScript的执行能力有限，这成为GEO效果的重大技术障碍。

AI爬虫的JS执行现状：GPTBot不执行JavaScript，仅获取初始HTML；PerplexityBot有有限的JS执行能力但超时设置为5秒；Google-Extended能执行JS但延迟可达数天；Bytespider的JS执行能力最弱。这意味着SPA网站的核心内容很可能完全无法被AI引擎获取。

影响量化：对200个React SPA网站的测试显示，AI爬虫能获取的页面内容平均仅为完整内容的23%（仅获取到HTML模板中的静态部分），而SSR/SSG网站的AI内容获取率达到98%以上。

解决方案：实施SSR（服务端渲染）或SSG（静态站点生成），确保AI爬虫在首次HTTP请求时即获得完整的HTML内容，无需依赖JavaScript执行。

SSR与SSG的选择策略

SSR（Server-Side Rendering）在每次请求时由服务器生成完整HTML，适合内容频繁更新或需要个性化展示的页面。SSG（Static Site Generation）在构建时预生成所有HTML文件，适合内容相对稳定的页面。

SSR适用场景：电商产品页（价格和库存实时变化）、用户仪表板（个性化数据）、新闻资讯首页（内容频繁更新）。SSR需要服务器持续运行，运维成本较高，但内容实时性最佳。

SSG适用场景：技术文档、博客文章、产品介绍页、关于我们等不频繁变更的页面。SSG生成纯静态HTML文件，可直接部署在CDN上，加载速度极快且运维成本最低。对GEO效果最优——AI爬虫获取的是预渲染的完整HTML，零JS执行等待。

ISR（Incremental Static Regeneration）是SSG的增强版，支持在后台静默重新生成页面，兼顾静态性能和内容新鲜度。Next.js的ISR功能允许设置页面的重新验证间隔（如每60分钟重新生成），适合准实时更新的内容。

Next.js SSR/SSG实施

Next.js是最流行的React SSR/SSG框架，提供了灵活的渲染策略选择。通过getStaticProps实现SSG、getServerSideProps实现SSR、getStaticPaths实现动态路由的静态生成。

SSG实施：对于产品介绍页等不频繁变更的页面，使用getStaticProps在构建时获取数据并预渲染HTML。配合revalidate参数实现ISR，在指定时间后后台重新生成。

SSR实施：对于需要实时数据的页面（如价格、库存），使用getServerSideProps在每次请求时服务端获取数据并渲染HTML。注意设置合理的缓存策略（Cache-Control）以避免每次请求都触发服务器渲染。

混合渲染策略：Next.js App Router支持在同一应用中按路由选择渲染方式。营销页面用SSG，用户面板用SSR，博客用ISR。通过next.config.js的headers配置为AI爬虫设置更长的缓存时间。

• getStaticProps: SSG，构建时预渲染，revalidate实现ISR
• getServerSideProps: SSR，每次请求服务端渲染
• generateStaticParams: 预生成动态路由页面
• App Router: 按文件路由自动选择渲染策略
• next-sitemap: 自动生成sitemap.xml

// Next.js App Router - 混合渲染策略示例

// SSG: 产品介绍页（构建时预渲染）
// app/products/[slug]/page.tsx
import { notFound } from 'next/navigation'

export async function generateStaticParams() {
  const products = await fetch('https://api.example.com/products').then(r => r.json())
  return products.map(p => ({ slug: p.slug }))
}

export const revalidate = 3600  // ISR: 每小时重新生成

export default async function ProductPage({ params }) {
  const product = await fetch(
    `https://api.example.com/products/${params.slug}`
  ).then(r => r.json())

  if (!product) notFound()

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      {/* 结构化数据: 帮助AI引擎理解产品信息 */}
      <script type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            '@context': 'https://schema.org',
            '@type': 'Product',
            name: product.name,
            description: product.description,
            offers: { price: product.price }
          })
        }}
      />
    </div>
  )
}

非React框架的SSR/SSG方案

如果企业网站使用Vue、Angular或其他技术栈，也有对应的SSR/SSG方案。核心原理一致：在服务端或构建时生成完整HTML，使AI爬虫无需执行JS即可获取内容。

Vue生态：Nuxt.js是Vue的SSR/SSG框架，提供与Next.js对等的能力。Nuxt 3的nitro引擎支持多种部署目标（Vercel、Netlify、Node.js Server、Cloudflare Workers）。使用nuxt generate实现全站静态生成，asyncData/fetch在服务端获取数据。

Angular生态：Angular Universal提供SSR能力。使用@nguniversal/express-engine在Express服务器上渲染Angular应用。对于SSG，使用@angular-devkit/build-angular的prerender选项预生成静态页面。

传统技术栈：对于PHP/WordPress网站，确保模板引擎在服务端输出完整HTML即可。WordPress的Gutenberg编辑器默认输出服务端渲染的HTML。对于动态内容（如JS组件），使用SSR API插件（如WP REST API + 预渲染）确保内容在HTML中可被AI爬虫获取。

SSR/SSG部署与CDN集成

SSR/SSG应用的部署方式直接影响AI爬虫的访问体验。SSG部署最简单——将生成的静态HTML文件部署到CDN即可。SSR部署需要Node.js服务器持续运行，需要考虑服务器位置、负载均衡和自动伸缩。

SSG部署：使用Next.js的next export或Nuxt的nuxt generate生成纯静态文件，部署到Cloudflare Pages、Vercel、Netlify或传统CDN。这是对GEO最友好的部署方式——AI爬虫从CDN边缘节点获取预渲染的完整HTML，延迟极低。

SSR部署：使用Docker容器化SSR应用，部署到离AI爬虫主要抓取节点较近的数据中心（如美东Ashburn）。配置负载均衡和自动伸缩以应对AI爬虫的突发抓取流量。使用CDN的动态加速功能优化SSR响应的回源路径。

混合部署策略：静态页面（SSG）部署到CDN边缘，动态页面（SSR）部署到中心服务器。通过CDN的Page Rules或Edge Functions实现路由分流——静态路由直接从CDN返回，动态路由回源到SSR服务器。

SSR/SSG迁移与GEO效果验证

从CSR迁移到SSR/SSG是一个重大技术变更，需要周密的迁移计划和效果验证流程。建议分阶段迁移，优先处理对GEO影响最大的页面类型。

迁移优先级：第一步迁移核心产品页和关键营销页（这些页面的AI可见度直接影响业务），第二步迁移博客和资源中心（内容量大但SEO/GEO价值高），第三步迁移辅助页面（关于我们、联系方式等）。

迁移验证：每个页面迁移后，使用curl模拟AI爬虫获取初始HTML（不执行JS），检查核心内容是否完整存在于HTML中。对比迁移前后的AI爬虫抓取量和内容获取完整度。

效果评估：迁移完成后2-4周，对比AI搜索可见度变化。根据47家企业的迁移数据，CSR→SSG迁移后AI爬虫内容获取率从平均23%提升至98%，AI搜索品牌提及率在4周内平均提升28.5%，AI搜索流量平均增长67%。

1. 使用curl模拟AI爬虫获取初始HTML
2. 检查核心内容关键词是否存在于HTML中
3. 确认root div不为空(CSR残留检测)
4. 对比迁移前后AI爬虫抓取量和获取完整度
5. 4周后评估AI搜索品牌提及率和流量变化

# 验证AI爬虫视角的HTML内容完整性
import requests
import re

AI_UA = 'GPTBot/1.0'

def check_ssr_content(url, expected_keywords):
    """检查AI爬虫获取的HTML是否包含核心内容"""
    resp = requests.get(url, headers={'User-Agent': AI_UA}, timeout=10)
    html = resp.text

    results = {
        'url': url,
        'status': resp.status_code,
        'html_size': len(html),
        'has_content': True,
        'missing_keywords': []
    }

    for kw in expected_keywords:
        if kw not in html:
            results['missing_keywords'].append(kw)
            results['has_content'] = False

    # 检查是否有空的root div (CSR残留)
    if re.search(r'<div id="root">\s*</div>', html):
        results['has_content'] = False
        results['issue'] = 'CSR残留: root div为空'

    return results

# 批量检查核心页面
pages = [
    ('https://example.com/products/crm', ['CRM', '客户关系管理', '价格']),
    ('https://example.com/blog/geo-guide', ['GEO', '优化', 'AI搜索']),
]

for url, keywords in pages:
    result = check_ssr_content(url, keywords)
    status = 'PASS' if result['has_content'] else 'FAIL'
    print(f'[{status}] {url} | size={result["html_size"]} | missing={result["missing_keywords"]}')