Заметки про React: “Серверные функции в Tanstack Router В Tanstack Router появилась возмож…”

Серверные функции в Tanstack Router

В Tanstack Router появилась возможность использовать серверные функции.


// getServerTime.ts
import { createServerFn } from '@tanstack/start'

export const getServerTime = createServerFn('GET', async () => {
  await new Promise((resolve) => setTimeout(resolve, 1000))
  return new Date().toISOString()
})

// Time.tsx
import { useServerFn } from '@tanstack/start'
import { useQuery } from '@tanstack/react-query'
import { getServerTime } from './getServerTime'

export function Time() {
  const getTime = useServerFn(getServerTime)

  const timeQuery = useQuery({
    queryKey: 'time',
    queryFn: () => getTime(),
  })
}

Серверные функции можно вызывать на сервере или на клиенте. Под капотом используется библиотека Vinxi, предназначенная для создания фулстек приложений.

Серверные функции извлекаются из клиентского бандла в отдельный серверный бандл во время компиляции. На сервере они выполняются как есть и результат отправляется обратно клиенту. На клиенте вызов серверных функций проксируется на сервер, где выполняется функция и результат возвращается на клиент.

https://tanstack.com/router/latest/docs/framework/react/start/server-functions