静态服务器函数

什么是静态服务器函数？

静态服务器函数是在构建时执行的服务器函数，在使用预渲染/静态生成时会被缓存为静态资源。可以通过将 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.js 的 fs 模块在构建输出目录中存储和检索静态数据，并在运行时使用 fetch 调用相同的静态文件来获取数据。

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

tsx

import {
  createServerFnStaticCache,
  setServerFnStaticCache,
} from '@tanstack/solid-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/solid-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