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

8ehkhllq 于 2023-01-29 发布在 Java

关注(0)|答案(2)|浏览(148)

bounty将在2天后过期。回答此问题可获得+50的声誉奖励。Aiden Barrett正在寻找来自声誉良好来源的答案：我确实需要布局来呈现来自静态构建的数据，而不是每次都在服务器上请求数据

我正在尝试创建一个布局组件，它可以获取自己的数据，我尝试过添加该高速缓存：'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();
...

JavaScript

来源：https://stackoverflow.com/questions/75171987/how-do-i-get-my-layout-component-to-remain-static-in-next13-app-folder

2条答案

按热度按时间

fslejnso1#

您可以使用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
  ...
}

赞(0）回复(0）举报 2023-01-29

qgzx9mmu2#

默认情况下，Next.js会自动执行静态获取。这意味着数据将在构建时获取、缓存并在每次请求时重用。作为开发人员，您可以控制静态数据的缓存和重新验证方式。
请参阅文档-https://beta.nextjs.org/docs/data-fetching/fundamentals
而且，这将在生产模式下工作。所以，请确保您使用的是next build && next start而不是next dev。
如果你从同一个URL获取数据，该高速缓存可能会更新，因为Next.js也会请求内置在fetch函数中的去重。

赞(0）回复(0）举报 2023-01-29

我来回答

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

2条答案

相关问题

热门标签

最新问答