Skip to article frontmatterSkip to article content
Site not loading correctly?

This may be due to an incorrect BASE_URL configuration. See the MyST Documentation for reference.

环境函数 (Environment Functions)

什么是环境函数?

环境函数(Environment Functions)是用于根据运行时环境(无论是客户端还是服务器)定义和控制函数执行的工具。这些工具通过确保环境特定的逻辑被安全且有目的地执行,帮助防止运行时错误,并提高全栈或同构应用程序的可维护性。

TanStack Start 提供了三个核心环境函数:


同构函数 (Isomorphic Functions)

使用 createIsomorphicFn() 可以定义在客户端或服务器端调用时表现不同的函数。这对于在环境之间安全地共享逻辑,同时将特定环境的行为委托给相应的处理器非常有用。

完整实现

import { createIsomorphicFn } from "@tanstack/react-start";

const getEnv = createIsomorphicFn()
  .server(() => "server")
  .client(() => "client");

const env = getEnv();
// ℹ️ 在 **服务器端**,它返回 `'server'`。
// ℹ️ 在 **客户端**,它返回 `'client'`。

仅服务器实现 (Partial Implementation)

以下是仅包含服务器端实现的 createIsomorphicFn() 示例:

import { createIsomorphicFn } from "@tanstack/react-start";

const serverImplementationOnly = createIsomorphicFn().server(() => "server");

const server = serverImplementationOnly();
// ℹ️ 在 **服务器端**,它返回 `'server'`。
// ℹ️ 在 **客户端**,它是一个空操作(返回 `undefined`)。

仅客户端实现 (Partial Implementation)

以下是仅包含客户端实现的 createIsomorphicFn() 示例:

import { createIsomorphicFn } from "@tanstack/react-start";

const clientImplementationOnly = createIsomorphicFn().client(() => "client");

const client = clientImplementationOnly();
// ℹ️ 在 **服务器端**,它是一个空操作(返回 `undefined`)。
// ℹ️ 在 **客户端**,它返回 `'client'`。

无实现

以下是没有定义任何环境特定实现的 createIsomorphicFn() 示例:

import { createIsomorphicFn } from "@tanstack/react-start";

const noImplementation = createIsomorphicFn();

const noop = noImplementation();
// ℹ️ 在 **客户端** 和 **服务器端**,它都是空操作(返回 `undefined`)。

什么是空操作 (no-op)?

空操作(no-op,全称 “no operation”)是指在执行时不执行任何操作的函数 —— 它只是简单地返回 undefined 而不执行任何逻辑。

// 基础的空操作实现
function noop() {}

仅限环境 (Env-Only) 函数

createServerOnlyFncreateClientOnlyFn 工具函数强制执行严格的环境绑定。它们确保返回的函数只能在正确的运行时上下文中调用。如果被误用,它们会抛出描述性的运行时错误,以防止无意识的逻辑执行。

createServerOnlyFn

import { createServerOnlyFn } from "@tanstack/react-start";

const foo = createServerOnlyFn(() => "bar");

foo(); // ✅ 在服务器端:返回 "bar"
// ❌ 在客户端:抛出 "createServerOnlyFn() functions can only be called on the server!"

createClientOnlyFn

import { createClientOnlyFn } from "@tanstack/react-start";

const foo = createClientOnlyFn(() => "bar");

foo(); // ✅ 在客户端:返回 "bar"
// ❌ 在服务器端:抛出 "createClientOnlyFn() functions can only be called on the client!"

Tree Shaking (摇树优化)

环境函数会根据每个生成的 Bundle 环境自动进行 Tree Shaking。

使用 createIsomorphicFn() 创建的函数支持 Tree Shaking。.client() 中的所有代码都不会包含在服务器 bundle 中,反之亦然。

在服务器上,使用 createClientOnlyFn() 创建的函数会被替换为一个在服务器端抛出 Error 的函数。对于客户端上的 createServerOnlyFn 函数,情况则正好相反。