服务器包

• 框架
• 数据
• 声明式

这是一项专为托管服务提供商集成而设计的高级功能。当您将应用程序编译成多个服务器包时，需要在应用程序前面设置一个自定义路由层，以将请求定向到正确的包。

React Router 通常将您的服务器代码构建成一个单一的包，该包导出一个请求处理函数。然而，在某些情况下，您可能希望将路由树分割成多个服务器包，每个包都为一部分路由提供一个请求处理函数。为了提供这种灵活性，react-router.config.ts 支持一个 serverBundles 选项，这是一个用于将路由分配到不同服务器包的函数。

serverBundles 函数会为树中的每个路由调用（除了那些不可寻址的路由，例如无路径的布局路由），并返回一个您希望分配给该路由的服务器包 ID。这些包 ID 将在您的服务器构建目录中用作目录名。

对于每个路由，此函数会接收一个包含该路由及其所有父级路由的数组，称为路由 branch（分支）。这允许您为路由树的不同部分创建服务器包。例如，您可以使用此功能为特定布局路由内的所有路由创建一个单独的服务器包。

import type { Config } from "@react-router/dev/config";

export default {
  // ...
  serverBundles: ({ branch }) => {
    const isAuthenticatedRoute = branch.some((route) =>
      route.id.split("/").includes("_authenticated"),
    );

    return isAuthenticatedRoute
      ? "authenticated"
      : "unauthenticated";
  },
} satisfies Config;

branch 数组中的每个 route 包含以下属性：

• id — 该路由的唯一 ID，其命名方式类似于其 file，但相对于应用程序目录且不带扩展名。例如，app/routes/gists.$username.tsx 的 id 将是 routes/gists.$username。
• path — 此路由用于匹配 URL 路径名的路径。
• file — 此路由入口文件的绝对路径。
• index — 此路由是否为索引路由。

构建清单

构建完成后，React Router 将调用 buildEnd 钩子，并传入一个 buildManifest 对象。如果您需要检查构建清单以确定如何将请求路由到正确的服务器包，这将非常有用。

import type { Config } from "@react-router/dev/config";

export default {
  // ...
  buildEnd: async ({ buildManifest }) => {
    // ...
  },
} satisfies Config;

使用服务器包时，构建清单包含以下属性：

• serverBundles — 一个将包 ID 映射到包的 id 和 file 的对象。
• routeIdToServerBundleId — 一个将路由 ID 映射到其服务器包 ID 的对象。
• routes — 一个将路由 ID 映射到路由元数据的路由清单。这可用于在您的 React Router 请求处理程序之前驱动一个自定义的路由层。