如何让我的布局组件在 Next13 应用程序文件夹中保持静态

【问题标题】：How do I get my layout component to remain static in Next13 app folder如何让我的布局组件在 Next13 应用程序文件夹中保持静态
【发布时间】：2023-01-27 23:09:48
【问题描述】：

我正在尝试创建一个获取自己数据的布局组件，我尝试将缓存添加到获取中：'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();
...

【问题讨论】：

标签： next.js server-side-rendering app-folder

【解决方案1】：

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

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
  ...
}

【讨论】：