如何在Gatsby.js中结合SSR实现博客板块动态路由？

1. 路由规则隔离配置 #

首先要区分静态路由和博客动态路由的边界，所有博客页面统一走/blog/前缀路径，避免和现有静态路由冲突：

• 在gatsby-node.js中添加如下配置，排除博客路径的静态预生成，让所有/blog/*的请求走SSR动态处理：

exports.onCreatePage = ({ page, actions }) => {
  const { deletePage, createPage } = actions
  if (page.path.match(/^\/blog/)) {
    deletePage(page)
    createPage({
      ...page,
      matchPath: "/blog/*"
    })
  }
}

• 在src/pages/目录下新建blog/[...slug].js文件，作为所有博客页面的统一渲染入口。

2. 博客SSR逻辑实现 #

Gatsby的getServerDataAPI是SSR的核心入口，会在服务端每次收到请求时执行，你可以在这个函数中请求自研CMS的接口拉取对应博客内容：

import * as React from "react"
import { Head } from "gatsby"

// 服务端数据拉取逻辑，仅在Node环境执行，敏感信息不会暴露到客户端
export async function getServerData(context) {
  // 从请求路径中提取博客唯一标识slug
  const slug = context.params.slug.join("/")
  // 替换为你自研CMS的实际接口地址和鉴权逻辑
  const cmsResponse = await fetch(`https://你的CMS内部接口地址/posts/${slug}`, {
    headers: {
      "Authorization": `Bearer ${process.env.CMS_API_TOKEN}`
    }
  })
  const post = await cmsResponse.json()

  // 博客不存在时返回404
  if (!post) {
    return { status: 404, props: {} }
  }

  return {
    props: { post }
  }
}

// 博客页面渲染组件
const BlogPost = ({ serverData }) => {
  const { post } = serverData
  return (
    <div className="blog-wrapper">
      <h1>{post.title}</h1>
      <div className="post-meta">
        <span>发布时间：{post.publishTime}</span>
        <span>作者：{post.author}</span>
      </div>
      <div 
        className="post-content" 
        dangerouslySetInnerHTML={{ __html: post.renderedContent }} 
      />
    </div>
  )
}

// 动态注入SEO元信息，服务端直接返回完整HTML，爬虫可直接识别
export const Head = ({ serverData }) => {
  const { post } = serverData
  return (
    <>
      <title>{post.title} - 你的站点名称</title>
      <meta name="description" content={post.summary} />
      <meta property="og:title" content={post.title} />
      <meta property="og:description" content={post.summary} />
    </>
  )
}

export default BlogPost

3. 运行与验证 #

• 原有非博客路径的页面完全保留原有Gatsby静态渲染逻辑，无需修改，构建时生成静态页面保证访问性能
• 博客内容更新后无需重新构建项目，用户下次访问对应页面时getServerData会自动拉取CMS最新内容，服务端返回的完整HTML直接包含所有内容和SEO元信息，不会影响SEO效果
• 部署时需要选择支持Node运行时的环境，确保SSR逻辑可以正常执行。

4. 存量内容迁移 #

你可以编写简单的批量脚本，将原有content文件夹下的博客Markdown文档解析后导入自研CMS，后续博客内容直接在CMS中管理即可，无需再维护项目内的Markdown文件。

内容的提问来源于stack exchange，提问作者John Valdetine