静态服务器函数（Static Server Functions）

什么是静态服务器函数？

静态服务器函数（Static Server Functions）是在构建时执行、并在使用预渲染/静态生成时缓存为静态资源的服务器函数。通过给 createServerFn 应用 staticFunctionMiddleware 中间件，可以把它设置为「static」模式：

import { createServerFn } from '@tanstack/react-start'
import { staticFunctionMiddleware } from '@tanstack/start-static-server-functions'

const myServerFn = createServerFn({ method: 'GET' })
  .middleware([staticFunctionMiddleware])
  .handler(async () => {
    return 'Hello, world!'
  })

确保 staticFunctionMiddleware 是最后一个中间件！

这种模式的工作流程如下：

• 构建时
  • 在构建时预渲染期间，带 staticFunctionMiddleware 的服务器函数会被执行
  • 结果会以静态 JSON 文件的形式，在一个派生的 key（函数 ID + 参数/负载哈希）下缓存到构建产物中
  • 结果在预渲染/静态生成期间照常返回，并用于预渲染页面
• 运行时
  • 最初，预渲染页面的 HTML 被发送出去，服务器函数数据被嵌入在 HTML 中
  • 当客户端挂载时，嵌入的服务器函数数据被水合（Hydration）
  • 对于之后的客户端调用，服务器函数会被替换为对该静态 JSON 文件的 fetch 请求