延迟静态生成 API
延迟静态生成 (DSG) 允许您将非关键页面的生成延迟到首次用户请求时,从而加快构建时间。您可以选择在构建时生成某些页面,而另一些页面仅在用户首次访问页面时生成,而不是一次性生成所有页面。后续的页面请求将使用首次请求该页面时生成的相同 HTML 和 JSON。
注意:此功能需要运行 NodeJS 服务器。目前,使用
gatsby serve和 Gatsby Cloud 可完全支持。
创建延迟页面
config
在 文件系统路由 API 模板中,您可以导出一个名为 config 的异步函数,该函数返回一个包含 defer 键的对象。
请阅读 延迟静态生成指南 以了解实际示例。
createPage
创建延迟页面几乎与 创建常规页面 相同。唯一的区别是 createPage 操作 新增了 defer 参数。当设置为 true 时,它会告诉 Gatsby 在构建过程中排除该页面,而是在第一次 HTTP 请求期间生成它。
defer 参数是可选的。如果省略,页面将默认在构建时生成。
在本地处理延迟页面
使用 gatsby develop 时,延迟静态生成没有效果。您可以像往常一样在本地处理页面。
如果您想专门测试延迟生成,请在命令行中运行 gatsby build 和 gatsby serve。延迟页面将在通过 gatsby serve 首次请求页面时生成。
在生产环境中使用
延迟静态生成需要运行 NodeJS 服务器。您可以将运行 gatsby serve 的 NodeJS 放在 Fastly 等内容分发网络 (CDN) 后面,但这还需要额外的基础设施(如监控、日志记录和崩溃恢复)。
开箱即用的 Gatsby Cloud 为您提供了完整的设置。
工作原理
对延迟页面的第一次请求会缓存未命中,因为 HTML/JSON 尚未生成。在 Gatsby Cloud 上,请求会发送到一个工作进程,该进程利用内部数据库来生成页面数据。一旦页面生成完毕,它会立即返回给用户。在后台,所有生成的工件都会被存储,以便第二次请求时,缓存的响应会直接从 CDN 提供服务。这样,它会完全绕过工作进程。
当您直接访问页面时,您将获得 HTML。如果您通过 Gatsby 的 Link 组件在客户端导航时请求页面,响应将是 JSON。Gatsby 的路由器会利用此 JSON 在客户端渲染页面。在后台,JSON 会被存储,HTML 会被生成,以便在第二次请求页面(包括直接访问)时,页面可以从 CDN 提供服务。
所有这些都会自动发生,您只需要配置 defer 键。
当前限制
目前有一些限制需要您注意。我们将尽最大努力通过我们的代码、对上游依赖的贡献以及文档更新来缓解这些限制。
不允许在 gatsby-config 中使用函数
gatsby-config 文件会被打包到 DSG 引擎中,因此该文件必须是可序列化的。函数或回调不能使用,因为它们是不可序列化的。
DSG 引擎不支持 onCreateWebpackConfig
如果您通过 onCreateWebpackConfig 修改 Gatsby 的 webpack 配置,这些更改将不会应用于 DSG 引擎。DSG 引擎会打包它运行 GraphQL 查询所需的一切,包括您的 gatsby-node 文件及其 createResolvers 或 createSchemaCustomization API。如果您在这些 API 中导入/使用了依赖于您的自定义 webpack 更改(例如,路径别名)的文件,它们将无法正常工作。