Reactjs next js 13 在获取中使用标头时动态渲染而不是静态渲染

如果您在FETCH选项中设置了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，则必须使用保留的导出重新验证，并在它们不提供重新验证选项的情况下将其设置为‘强制缓存’:

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请求设置的重新验证值.因此，第二个选项不适用于Fetch API，因为他们已经实现了一个带有cache: 'force-cache'属性的重新验证选项.

这也被记录在新的Nextjs 13测试版文档Caching和Route Segment Config Options中