Blitz 尚在 beat 阶段! 🎉 预计会在今年的 Q3 季度发布 1.0
Back to Documentation Menu

静态 HTML 导出

Topics

Jump to a Topic

blitz export 允许你导出你的应用为可以独立运行而无需 Node.js 服务器的静态 HTML。

导出的应用仅支持 Blitz 的部分功能,像 动态路由,预请求,预加载和动态导入。它 支持 queries / mutations,权限验证或数据库访问。

blitz export 的工作原理是通过预渲染将页面导出为 HTML。对于动态路由,你的 页面可以导出一个 getStaticPaths 函数来让导出器知道要 为该路由生成哪些页面。

blitz export 可以用于以下情况:你没有页面需要服务端渲染或增量数据的 要求(尽管静态渲染的页面仍可以正常从客户端获取数据)。

Info

如果你要创建一个仅将某些页面呈现为静态 HTML 的混合站点,Blitz 已经为你自动 完成了!如果你的页面不适用 getServerSideProps,那么它将是一个静态 HTML 页面。

blitz export 还会导致 增量静态生成和再生 等 功能被禁用,因为它们需要 blitz start 或 Serverless 部署才能运行。

如何使用

像平常使用 Blitz 一样开发应用。然后运行:

blitz build
blitz export

为此,你可能需要像这样更新 package.json 中的脚本:

"scripts": {
  "build": "blitz build && blitz export"
}

然后运行:

yarn build

然后你将在输出的目录中拥有应用的静态版本。

默认情况下,blitz export 不需要任何配置。它将为页面目录中的每个页面输出 一个静态 HTML 文件(或为 动态路由 输出更 多的 HTML 文件,在此它将调用 getStaticPaths 并根据结果生成页面)。对于更 高级的方案,你可以在你的 blitz.config.js 文件中定义一个名为 exportPathMap 的参数,以准确配置要生成的 页面。

部署

默认情况下,blitz export 将会生成一个输出目录,任何静态托管服务或 CDN 均 可支持该目录。

注意事项

  • getServerSideProps 不能在页面中使用,因为该方法需要服务器支持。考虑改 用 getStaticProps
  • 使用 blitz export 时,不支持 getStaticPathsfallback: true 模式 。
  • 不支持 API 路由,Queries 和 Mutations,因为它们无法预渲染为 HTML。
  • 不支持国际化路由,因为它需要服务端路由。
  • 使用 blitz export 时不支持 Image 组件的默认加载器。但其它加载器选项可 以使用。

Idea for improving this page? Edit it on GitHub.