headers

`headers`

每个路由都可以定义自己的 HTTP 标头。其中一个常见标头是 Cache-Control 标头，它指示浏览器和 CDN 缓存页面可以缓存的位置和时间。

import type { HeadersFunction } from "@remix-run/node"; // or cloudflare/deno

export const headers: HeadersFunction = ({
  actionHeaders,
  errorHeaders,
  loaderHeaders,
  parentHeaders,
}) => ({
  "X-Stretchy-Pants": "its for fun",
  "Cache-Control": "max-age=300, s-maxage=3600",
});

通常，你的数据比你的路由模块更能指示你的缓存持续时间（数据往往比标记更具动态性），因此 action 和 loader 的标头也会传递到 headers() 中：

import type { HeadersFunction } from "@remix-run/node"; // or cloudflare/deno

export const headers: HeadersFunction = ({
  loaderHeaders,
}) => ({
  "Cache-Control": loaderHeaders.get("Cache-Control"),
});

注意：actionHeaders 和 loaderHeaders 是 Web Fetch API Headers 类的一个实例。

如果 action 或 loader 抛出了 Response 并且我们正在渲染边界，则抛出的 Response 中的任何标头都将在 errorHeaders 中可用。这允许您从抛出父错误边界的子加载器访问标头。

嵌套路由

由于 Remix 具有嵌套路由，因此当嵌套路由匹配时，标头之争将不可避免。默认行为是 Remix 仅利用它在可渲染匹配中找到的最深标头函数的结果标头（如果出现错误，则最多包括边界路由）。

├── users.tsx
├── users.$userId.tsx
└── users.$userId.profile.tsx

如果我们正在查看 /users/123/profile，那么将呈现三条路由：

<Users>
  <UserId>
    <Profile />
  </UserId>
</Users>

如果用户正在查看 /users/123/profile，而 users.$userId.profile.tsx 没有导出 headers 函数，则 Remix 将使用 users.$userId.tsx 的 headers 函数的返回值。如果该文件没有导出，则它将使用 users.tsx 中的结果，依此类推。

如果所有三个都定义了 headers，则最深的模块获胜，在本例中为 users.$userId.profile.tsx。但是，如果您的 users.$userId.profile.tsx 的 loader 抛出并冒泡到 users.userId.tsx 中的边界 - 那么 users.userId.tsx 的 headers 函数将被使用，因为它是叶子渲染路由。

我们不希望您的回复中出现意外的标头，因此，如果您愿意，您可以自行合并它们。Remix 将 parentHeaders 传递给您的 headers 函数。因此，users.tsx 标头会传递给 users.$userId.tsx，然后 users.$userId.tsx 的 headers 会传递给 users.$userId.profile.tsx 的 headers。

也就是说，Remix 为您提供了一把非常大的枪，可以用来射击您的脚。您需要小心，不要从比父路由更激进的子路由模块发送 Cache-Control。以下是一些在这些情况下选择最不激进的缓存的代码：

import type { HeadersFunction } from "@remix-run/node"; // or cloudflare/deno
import parseCacheControl from "parse-cache-control";

export const headers: HeadersFunction = ({
  loaderHeaders,
  parentHeaders,
}) => {
  const loaderCache = parseCacheControl(
    loaderHeaders.get("Cache-Control")
  );
  const parentCache = parseCacheControl(
    parentHeaders.get("Cache-Control")
  );

  // take the most conservative between the parent and loader, otherwise
  // we'll be too aggressive for one of them.
  const maxAge = Math.min(
    loaderCache["max-age"],
    parentCache["max-age"]
  );

  return {
    "Cache-Control": `max-age=${maxAge}`,
  };
};

尽管如此，您可以通过不在父路由中定义标头而仅在叶路由中定义标头来避免整个问题。每个可以直接访问的布局都可能有一个索引路由。如果您只在叶路由上定义标头，而不是在父路由上定义标头，那么您就永远不必担心合并标头。

请注意，你还可以在 entry.server.tsx 文件中添加一些应该是全局的内容的标题，例如：

import type {
  AppLoadContext,
  EntryContext,
} from "@remix-run/node"; // or cloudflare/deno
import { RemixServer } from "@remix-run/react";
import { renderToString } from "react-dom/server";

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext,
  loadContext: AppLoadContext
) {
  const markup = renderToString(
    <RemixServer context={remixContext} url={request.url} />
  );

  responseHeaders.set("Content-Type", "text/html");
  responseHeaders.set("X-Powered-By", "Hugs");

  return new Response("<!DOCTYPE html>" + markup, {
    headers: responseHeaders,
    status: responseStatusCode,
  });
}

请记住，此操作将适用于所有文档请求，但不适用于 data 请求（例如，对于客户端转换）。对于这些，请使用 handleDataRequest。