Gatsby动态生成路径页面如何支持谷歌爬虫抓取与用户直接访问

方案1：使用Gatsby延迟静态生成（DSG）+ 增量构建（ISR）组合 #

• 无需全量构建500万页面，开启defer: true参数后，仅当用户首次访问或爬虫访问时才会生成静态页面，生成后持久化存储到CDN，后续访问直接返回静态资源，完全满足SEO需求
• 配置代码示例，直接在gatsby-node.js的createPage调用中添加参数即可：

exports.createPages = async ({ actions }) => {
  const { createPage } = actions
  // 仅拉取热门车型+热门配件的组合预生成，其余全部走延迟生成
  const hotCombinations = await getHotCombinations() // 你的热门组合数据接口
  const allCombinations = await getAllCombinationMeta() // 仅拉取全量组合的id、name字段，内存占用极低

  // 预生成热门页面
  hotCombinations.forEach(item => {
    createPage({
      path: `/comparison/${item.carName}-${item.partName}`,
      component: require.resolve("./src/templates/comparison.js"),
      context: {
        carId: item.carId,
        partId: item.partId,
      },
    })
  })

  // 非热门页面开启延迟静态生成
  allCombinations.forEach(item => {
    if (!hotCombinations.find(hot => hot.id === item.id)) {
      createPage({
        path: `/comparison/${item.carName}-${item.partName}`,
        component: require.resolve("./src/templates/comparison.js"),
        context: {
          carId: item.carId,
          partId: item.partId,
        },
        defer: true // 核心参数，开启延迟生成
      })
    }
  })
}

• 额外开启增量构建，每次发布仅更新修改过的页面，无需全量重建，构建时间可从小时级降到分钟级

方案2：针对爬虫做服务端渲染（SSR）兜底 #

• 给/comparison/前缀的路径配置SSR模式，请求到达时判断访问来源：
  • 爬虫访问：服务端实时拉取接口数据渲染完整HTML返回，完全满足抓取要求
  • 普通用户访问：返回前端页面框架，客户端拉取数据渲染，体验和之前的动态路由完全一致
• 配置方式：直接在页面模板中使用Gatsby原生的getServerData方法处理即可：

export async function getServerData(context) {
  const userAgent = context.headers['user-agent'] || ''
  const isCrawler = /bot|spider|crawl|slurp|mediapartners|googlebot|bingbot|baiduspider/i.test(userAgent)
  
  const { carName, partName } = context.params
  // 提前把name到id的映射存在KV缓存中，查询延迟<10ms
  const { carId, partId } = await getIdFromName(carName, partName)
  const pageData = await fetch(`https://mysiteAPI.com/${carId}/${partId}`).then(res => res.json())

  if (isCrawler) {
    return {
      props: pageData // 服务端直接注入全量数据，返回完整可被抓取的HTML
    }
  }

  return {
    props: {
      carId,
      partId // 仅返回id给客户端自行拉取数据
    }
  }
}

方案3：边缘计算节点渲染兜底 #

如果你的站点部署在支持边缘函数的平台，可以把/comparison/前缀的请求全部交给边缘函数处理，在边缘节点实时拉取数据渲染静态HTML返回给爬虫，无需回源，响应速度快，也不会增加源站压力。

额外优化建议 #

• 提前生成car.name、part.name到id的映射表，存在KV数据库，不用每次请求都查询全量业务库
• 生成的静态页面缓存时间设置为7天以上，接口数据更新时主动触发对应页面重刷即可
• 生成站点地图时仅提交热门组合的页面，非热门页面爬虫爬取后会自动收录，无需全量提交避免被搜索引擎判定为低质内容

内容的提问来源于stack exchange，提问作者Francesco Arnesano