立即迁移到 Netlify

Netlify 宣布 Gatsby Cloud 的下一次迭代。 了解更多

服务器端渲染 API

服务器端渲染 (SSR) 允许您在运行时渲染页面,数据在用户访问页面时获取。服务器在 HTTP 请求期间生成完整的 HTML 并将其发送给用户。该 API 侧重于 Gatsby 数据层之外的数据获取。

注意:此功能需要运行 NodeJS 服务器。目前与 gatsby serveGatsby Cloud 完全支持。

创建服务器渲染页面

您可以通过 与创建常规页面相同的方式(包括使用文件系统路由 API)来创建服务器渲染页面。

主要区别在于页面组件必须导出一个名为 getServerData 的 async 函数。

当页面组件导出 getServerData 函数时,Gatsby 会将使用该组件构建的所有页面视为服务器渲染。

context 参数是一个具有以下键的对象:

  • headers: 请求头
  • method: 请求方法,例如 GET
  • url: 请求 URL
  • query: 表示查询字符串的对象
  • params: 如果您使用 文件系统路由 API,URL 路径将作为 params 传入。例如,如果您的页面位于 src/pages/{Product.name}.js,则 params 将是一个类似 { name: 'value' } 的对象。

getServerData 可以返回一个具有以下几个可能键的对象:

  • status (可选): 应返回的 HTTP 状态码。应为 有效的 HTTP 状态码。
  • props (可选): 包含传递给 serverData 页面 prop 的数据的对象。应为可序列化的对象。
  • headers (可选): 包含发送到浏览器和缓存代理/CDN 的 headers 的对象(例如,缓存头)。

在 React 页面组件中使用 serverData prop

您从 getServerData 返回的 props 对象将作为 serverData prop 传递给页面组件。

与构建时 GraphQL 查询的交互

服务器渲染页面也支持常规的 Gatsby GraphQL 页面查询。页面查询在构建时执行,数据在每次渲染时作为 data prop(以及 serverData prop)传递给 React 组件。

请记住,data 在每次页面渲染时都是相同的,而 serverData 会根据您的 getServerData 函数的返回值而变化。目前不支持运行时 GraphQL 查询。

本地使用服务器渲染页面

服务器渲染页面同时支持 gatsby developgatsby serve。页面将在每次请求时重新生成。

生产环境使用

服务器端渲染需要运行 NodeJS 服务器。您可以将运行 gatsby serve 的 NodeJS 放在 Fastly 等内容分发网络 (CDN) 后面,但这还需要额外的基础设施(例如监控、日志记录和崩溃恢复)。

Gatsby Cloud 中,您可以开箱即用地获得带有自动扩展的完整设置。

工作原理

对于 SSR,每次请求都只在服务器端运行。在 Gatsby Cloud 上,请求被发送到一个运行您的 getServerData 函数的 worker 进程,将此数据传递给 React 组件,然后将 HTML 返回给用户。默认情况下,每次请求都是缓存未命中,并且对于缓存,您需要设置自定义的 HTTP Cache-Control 头。

当您直接访问页面时,您将获得 HTML。如果您通过 Gatsby 的 Link 组件进行客户端导航请求页面,响应将是 JSON。Gatsby 的路由器使用它在客户端渲染页面。

这一切都是自动发生的,您只需要在页面中定义一个 getServerData 函数。您不能从非页面文件中导出它。

其他资源

立即开始构建,在 Netlify!
在 GitHub 上编辑此页面
©2025Gatsby, Inc.