加载时的动态页面，而不是构建时答案

【问题标题】：Dynamic pages at load time, not build time加载时的动态页面，而不是构建时
【发布时间】：2021-06-16 08:46:09
【问题描述】：

我正在建立一个定期添加新内容的编辑网站。因此，他们要求在加载时间加载文章和文章内容，而不必运行构建并等待它。速度对他们来说非常重要，即使花了一些时间优化构建速度，他们也需要更快。

我使用 sanity 客户端可以很好地获取文章，但是当您单击文章时，它正在寻找 the-slug-of-the-article.js 而不是某种文章页面。如果我可以让它加载类似article.js 的东西，我可以使用 URL 中的 slug 参数来获取页面内容，但我不确定如何在不更改 URL 结构的情况下实际加载页面而不是 the-slug.js。

为了让事情更混乱，这里实际上也有一个类别，所以 URL 看起来像：www.example.com/category/the-slug-of-the-article

【问题讨论】：

这就是传统服务器应用程序的工作方式。您最好查看 Express、Redwood 或类似名称。

标签： javascript node.js reactjs gatsby sanity

【解决方案1】：

简短回答：您不能在“加载”时使用静态网站生成器构建动态页面。

TL;DR

我假设您正在生成最终的客户网站。否则，您可以使用运行gatsby develop 的 AWS 的 EC2 实例（或任何其他服务中的类似实例）来实现您想要做的事情。 Gatsby 启用了refresh the content 的功能，使用__refresh URL 参数自动向其自己的域发送curl 请求。对于自己的行为，当然只有gatsby develop才有：

curl -X POST http://localhost:8000/__refresh

为此，您需要能够ENABLE_GATSBY_REFRESH_ENDPOINT environment variable，因此您需要调整您的运行命令。

当然，gatsby develop 不会像 gatsby build 那样完善和构建“最终”静态网站，没有所有 SEO、代码改进或资产优化，因此这种方法可能仅适用于测试目的。

在您的情况下，Sanity 添加了一个观察器，使您可以更轻松地完成这项工作。您只需要启用watchMode flag 就像：

{
  resolve: `gatsby-source-sanity`,
  options: {
    projectId: `abc123`,
    dataset: `blog`,
    token: process.env.SANITY_TOKEN,
    graphqlTag: 'default',
    watchMode: true,
  },
},

注意：默认设置为false。

如果不是您的情况，并且您想构建一个静态网站并在文章发布后立即显示“实时”内容，您将需要在您的 CMS（撰写文章的地方）和服务器之间配置 webhooks .

基本上，webhook 是一个在服务器中抛出/通知另一个动作的动作。例如，一旦文章在 CMS 中发布，webhook 就会通知服务器运行部署以发布文章。当然，此操作将需要一些时间，具体取决于您的项目大小和代码优化，从几十秒到 +15 分钟不等（在最坏的情况下）。

webhook 实现将依赖并依赖于 CMS 和服务器，但它们或多或少都非常相似。

请记住，您正在提供需要编译、捆绑和构建的静态内容，这就是 Gatsby 如此之快（以及所有静态站点生成器）的原因，因此您无法在最终客户端中绕过此过程网站显示使用此技术的“实时”文章。

【讨论】：