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

Question

我试图创建一个获取自己数据的布局组件，我尝试添加缓存:'强制缓存'来获取，但每次我更新我的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()函数在构建时获取数据，并将其作为道具提供给您的组件。这样，数据将在服务器上预呈现，并且在用户刷新页面时不会更改:

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自动进行静态获取。这意味着数据将在构建时获取、缓存并在每个请求时重用。作为开发人员，您可以控制如何缓存和重新验证静态数据。

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

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

如果你从相同的URL在其他任何地方获取数据，缓存可能会更新。因为Next.js也请求内置到fetch函数本身的重复数据删除。