静态服务器函数

什么是静态服务器函数？

静态服务器函数是在构建时执行的服务器函数，当使用预渲染/静态生成时，它们会被缓存为静态资源。可以通过将 type: 'static' 选项传递给 createServerFn 来将它们设置为“静态”模式

tsx

const myServerFn = createServerFn({ type: 'static' }).handler(async () => {
  return 'Hello, world!'
})

const myServerFn = createServerFn({ type: 'static' }).handler(async () => {
  return 'Hello, world!'
})

此模式流程如下

构建时
- 在构建时预渲染期间，将执行带有 type: 'static' 的服务器函数
- 结果会作为静态 JSON 文件，使用派生的键（函数 ID + 参数/负载哈希）与你的构建输出一起缓存
- 在预渲染/静态生成期间，结果会像平常一样返回，并用于预渲染页面
运行时
- 最初，提供预渲染页面的 html，服务器函数数据嵌入在 html 中
- 当客户端挂载时，嵌入的服务器函数数据会被水合
- 对于未来客户端侧的调用，服务器函数会被替换为对静态 JSON 文件的 fetch 调用

自定义服务器函数静态缓存

默认情况下，静态服务器函数缓存实现通过 node 的 fs 模块在构建输出目录中存储和检索静态数据，同样地，在运行时使用对相同静态文件的 fetch 调用来获取数据。

可以通过导入并调用 createServerFnStaticCache 函数来创建自定义缓存实现，然后调用 setServerFnStaticCache 来设置它，从而自定义此接口

tsx

import {
  createServerFnStaticCache,
  setServerFnStaticCache,
} from '@tanstack/react-start/client'

const myCustomStaticCache = createServerFnStaticCache({
  setItem: async (ctx, data) => {
    // Store the static data in your custom cache
  },
  getItem: async (ctx) => {
    // Retrieve the static data from your custom cache
  },
  fetchItem: async (ctx) => {
    // During runtime, fetch the static data from your custom cache
  },
})

setServerFnStaticCache(myCustomStaticCache)

import {
  createServerFnStaticCache,
  setServerFnStaticCache,
} from '@tanstack/react-start/client'

const myCustomStaticCache = createServerFnStaticCache({
  setItem: async (ctx, data) => {
    // Store the static data in your custom cache
  },
  getItem: async (ctx) => {
    // Retrieve the static data from your custom cache
  },
  fetchItem: async (ctx) => {
    // During runtime, fetch the static data from your custom cache
  },
})

setServerFnStaticCache(myCustomStaticCache)

什么是静态服务器函数？

自定义服务器函数静态缓存

订阅 Bytes

订阅 Bytes