如何让我的布局组件在 Next13 应用程序文件夹中保留 static

Question

赏金将在 2 天后到期。 此问题的答案有资格获得+50声望赏金。 艾登·巴雷特 ( Aiden Barrett ) 正在寻找可靠来源的答案：

我真的需要布局来呈现 static 构建中的数据，而不是每次都在服务器上请求数据

我正在尝试创建一个获取自己数据的布局组件，我尝试将缓存添加到获取中：'force-cache' 但每次更新我的 CMS 内容并刷新我的页面时，都会加载新内容。 这是我的代码示例：

const getLayoutData = async () => {
 const response = await fetch(
    `https://cdn.contentful.com/spaces/${
      process.env.CONTENTFUL_SPACE_ID
    }/environments/${
      process.env.CONTENTFUL_ENVIRONMENT || "master"
    }/entries/${fieldId}?access_token=${process.env.CONTENTFUL_ACCESS_TOKEN}`,
    {
      cache: "force-cache",
    }
  );

  const {entryTitle, ...headerData} = await response.json();

  return { headerData };
}

export default async function Layout() {
 const data = await getLayoutData();
...

Answer 1

您可以使用getStaticProps() function 在构建时获取数据并将其作为道具提供给您的组件。 这样，数据将在服务器上预渲染，并且不会在用户刷新页面时发生变化：

import getLayoutData from './getLayoutData';

export async function getStaticProps() {
  const data = await getLayoutData();
  return { props: { data } };
}

export default function Layout({ data }) {
  // Use data in your component
  ...
}

或者，您可以使用getServerSideProps() ，它在请求时而不是构建时在服务器上运行。 如果您有经常更改的动态数据，我会建议：

import getLayoutData from './getLayoutData';

export async function getServerSideProps(context) {
  const data = await getLayoutData();
  return { props: { data } };
}

export default function Layout({ data }) {
  // Use data in your component
  ...
}

Answer 2

默认情况下，Next.js 会自动执行 static 次提取。 这意味着数据将在构建时获取、缓存并在每个请求中重用。 作为开发人员，您可以控制 static 数据的缓存和重新验证方式。

请参阅文档 - https://beta.nextjs.org/docs/data-fetching/fundamentals

此外，这将在生产模式下工作。 因此，请确保您使用的是next build && next start而不是next dev 。

如果您在其他任何地方从同一个 URL 获取数据，缓存可能正在更新。 由于 Next.js 也确实请求重复数据删除内置于fetch function 本身。