Statische Server-Funktionen

Statische Serverfunktionen sind Serverfunktionen, die zur Build-Zeit ausgeführt und als statische Assets zwischengespeichert werden, wenn Prerendering/statische Generierung verwendet wird. Sie können in den Modus "statisch" versetzt werden, indem die Option type: 'static' an createServerFn übergeben wird.

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

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

Dieses Muster folgt diesem Ablauf

• Build-Zeit
  • Während des Prerendering zur Build-Zeit wird eine Serverfunktion mit type: 'static' ausgeführt.
  • Das Ergebnis wird mit den Build-Ausgaben als statische JSON-Datei unter einem abgeleiteten Schlüssel (Funktions-ID + Parameter-/Payload-Hash) zwischengespeichert.
  • Das Ergebnis wird während des Prerendering/der statischen Generierung wie gewohnt zurückgegeben und zum Prerendering der Seite verwendet.
• Laufzeit
  • Zunächst wird das HTML der vorgerenderten Seite ausgeliefert und die Daten der Serverfunktion sind in das HTML eingebettet.
  • Wenn der Client gemountet wird, werden die eingebetteten Daten der Serverfunktion hydriert.
  • Für zukünftige Client-seitige Aufrufe wird die Serverfunktion durch einen Fetch-Aufruf an die statische JSON-Datei ersetzt.

Standardmäßig speichert und ruft die Implementierung des statischen Caches von Serverfunktionen statische Daten im Build-Ausgabeverzeichnis über das fs-Modul von Node ab und ruft die Daten zur Laufzeit ebenfalls mit einem fetch-Aufruf an dieselbe statische Datei ab.

Diese Schnittstelle kann angepasst werden, indem die Funktion createServerFnStaticCache importiert und aufgerufen wird, um eine benutzerdefinierte Cache-Implementierung zu erstellen, und dann setServerFnStaticCache aufgerufen wird, um sie festzulegen.

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)