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

Question

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

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

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

Answer 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，因此您需要调整运行ning 命令。

当然，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 是服务器中 throws/notifies 另一个动作的一个动作。例如，一旦文章在 CMS 中发布，webhook 将通知服务器运行部署以发布文章。当然，这个动作会花费一些时间，这取决于你项目的大小和代码优化，从几十秒到最多+15分钟（最坏的情况下）。

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

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

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

Dynamic pages at load time, not build time

javascript

node.js

reactjs

gatsby

sanity

TL;DR