我有一个由Gatsby.js开发的web应用程序。有一个内容文件夹，包括Markdown文档，用于创建应用程序的内容。我们用这个文件夹管理内容。
我们已经创建了我们自己的CMS，我们想通过使用这个CMS创建博客页面和动态路由系统来管理这个应用程序的博客部分。现在，我们知道使用服务器端渲染，但如何使用呢?
总之，我们希望使用混合系统来呈现页面。除博客页面外的主要内容将使用Gatsby默认路由系统进行呈现，博客部分将使用SSR进行呈现。此外，我们需要在博客部分创建一个动态路由系统，以免在不构建应用程序的情况下失去SEO的任何分数。
对于自定义路由，有很多方法可以做到这一点。你必须记住，盖茨比是混合模型开始——这意味着它既做SSR渲染的"静态页面"，它做动态路由一旦部署和加载到客户端浏览器(它使用reach在hood下，我相信)。
关键在于盖茨比使用的命名约定…(我也花了一段时间来破译这个魔法)。下面是我的一个盖茨比网站的配置:
exports.onCreatePage = ({ page, actions }) => {
const { createPage } = actions
// Make the front page match everything client side.
// Normally your paths should be a bit more judicious.
// console.log(page.path);
if (page.path === `/productPage/`) {
page.matchPath = `/active-listings/:prodID`
createPage(page)
}
if (page.path === `/tagsPage/`) {
page.matchPath = `/tags/:tagType/:tagName`
createPage(page)
}
}
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions;
const pages = await graphql(`
{
<<REDACTED GRAPHQL>>
}
`);
const blogTemplate = path.resolve("src/templates/blog.tsx");
const productTemplate = path.resolve("src/templates/shopProduct.tsx");
// Make the blog pages...
pages.data.query.edges.forEach(edge => {
createPage({
path: `/blog/${edge.node.uid}`,
component: blogTemplate,
context: {
uid: edge.node.uid,
},
})
})
// Make the shop pages...
pages.data.query.edges.forEach(edge => {
createPage({
path: `/shop/${edge.node.uid}`,
component: productTemplate,
context: {
uid: edge.node.uid,
},
})
})
}
这里，onCreatePage是一个动态路由——它使用正则表达式和一些自定义语法糖(例如:prodId)在客户端构建路由——这意味着对于我的页面，当用户访问"https://www.example.com/tags/ids/NewPages"NewPages未创建SSR。创建了该页面的模板，但是填充模板的数据是实时地(在请求时)放入模板的。通过这种方式，构建基于ids或tags或RESTful的许多页面非常方便-然后您的产品DB或任何支持数据的东西都可以轻松地提供它。
注意:你需要研究你自己的需求，了解这是否/如何/对你的SEO有影响!
///
你看到的exports.createPages是《盖茨比》的SSR部分。这是，在我的情况下。在SSR/编译时获取一堆数据，构建所有graphQL节点，然后使用节点构建页面——这些页面是预构建的，是最初交付给最终用户的SPA有效负载的一部分(在第一次加载时)。这使得加载后的速度非常快，这对爬虫/SEO来说非常好，但它的副作用是需要很长时间来编译(在大多数情况下，考虑线性时间——节点越多，页面构建的时间就越长)。如果你有100个/1000个，甚至10000个页面，你正在用这种方式构建，可能不是什么大问题。但是，如果你有一个可变长度的产品目录，这可能会消耗大量的构建时间——这对一些人来说可能也不是一个问题。
经销商选择-选择你的毒药。
对于我的开发和网站，我经常使用这两种策略。我经常SSR博客页面，我动态地构建/路由产品页面(如下所示);通过这种方式，如果产品页面更新，它不需要新的构建，并且都是数据驱动的。博客页面更静态，我倾向于让它们在编译时构建(没有很好的理由，我可以用另一种方式完成，但我不想将后端博客数据库暴露给前端，所以构建SSR隐藏了它)。
查看文档:https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/