next js 13 在 fetch 中使用标头时动态渲染而不是静态渲染？

Question

我正在与自己争论，要么我没有正确理解接下来的 13 个新概念，要么这真的是一个错误？我不确定，并感谢更了解情况的人提出正在发生的事情。

我在新的 next 13（最新版本）的“app”文件夹中有一个简单的 page.tsx。

当我使用 fetch 获取该页面中的数据，但不添加任何标头时，构建（yarn/npm 构建）最终显示页面是静态构建的（在构建期间），但是当我添加所需的标头（授权）时，构建显示页面是动态呈现的（每个请求）。

是设计使然吗？我无法将标头传递给 fetch API 并静态呈现页面？

这是我正在使用的代码：

const getData = async () => {
  const res = await fetch(
    "https://endless-app.onrender.com/api/site-settings",
    {
      headers: {
        Authorization: `Bearer 24653f35c767c9d1ed04f15f143eda0ac12b1cd60d`,
      },
    }
  );
  const data = await res.json();
  return data;
};

export default async function About() {
  const data = await getData();


  return (
    <div>
      <h1>About</h1>
    </div>
  );
}  

最终得到动态渲染：

只需从 fetch 中删除标头，就会得到静态渲染，就像我喜欢的那样：

const getData = async () => {
  const res = await fetch(
    "https://endless-app.onrender.com/api/site-settings"
  );
  const data = await res.json();
  return data;
};

感谢任何帮助。

谢谢 ！

Answer 1

如果您cache: "force-cache"在获取选项中进行设置，则可以修复该行为。

如果您使用其他 https 客户端 api，您可以设置以下保留导出以强制静态渲染：

export const revalidate = 'force-cache'

因此，如果您使用 fetch api，您的代码将如下所示：

const getData = async () => {
  const res = await fetch(
    "https://endless-app.onrender.com/api/site-settings",
    {
      cache: "force-cache",
      headers: {
        Authorization: `Bearer ********************************`,
      },
    }
  );
  const data = await res.json();
  return data;
};

export default async function About() {
  const data = await getData();


  return (
    <div>
      <h1>About</h1>
    </div>
  );
}  

如果您使用其他 http 客户端 api（例如 axios），则必须使用保留的导出重新验证并将其设置为“force-cache”（如果它们不提供重新验证选项）：

import axios from "axios";

const getData = async () => {
  const res = await axios.get("https://jsonplaceholder.typicode.com/posts", {
    headers: {
      Authorization: `Bearer ********************************`,
    },
  });
  return res.data;
};

export default async function About() {
  const data = await getData();

  return (
    <div>
      <h1>About</h1>
    </div>
  );
}

export const revalidate = "force-cache";

请记住，此选项不会覆盖各个提取请求设置的重新验证值。因此，第二个选项不适用于 fetch api，因为他们已经使用该cache: 'force-cache'属性实现了重新验证选项。

这也记录在新的 nextjs 13 beta 文档的缓存和路由段配置选项下