我尝试使用{cache:'force-cache'} fetch选项实现SSG操作,但即使模拟服务器的数据发生更改,我也总是返回相同的数据。
{该高速缓存:'no-store'} fetch选项会更改数据,但这是一个SSR方法,因此我认为它不适合我的站点创建博客。
我正在尝试使用axios来寻找另一种方法,但我想我在Next.js 13版本中没有使用过axios。如何在Next.js 13版本中使用axios实现SSG行为?
import Layout_Mobile from "@/components/Layout/DeviceLayout/Layout_Mobile";
import Layout_PC from "@/components/Layout/DeviceLayout/Layout_PC";
import PostDetailPage from "@/components/PostDetailPage/PostDetailPage";
const fetchPosts = async (params) => {
const res = await fetch(
`https://5875183d-18c0-49ad-b99d-8deeb4ded6a9.mock.pstmn.io/posts/${params.slug}`,
{
cache: "force-cache",
}
)
.then((response) => response.json())
.then((data) => {
return data;
});
return res;
};
export const generateStaticParams = async () => {
const res = await fetch(
"https://5875183d-18c0-49ad-b99d-8deeb4ded6a9.mock.pstmn.io/posts"
)
.then((response) => response.json())
.then((data) => {
return data;
});
return res.map((post) => ({
slug: post.id.toString(),
}));
};
const page = async ({ params }) => {
const { title, summary, content, author, createdAt } = await fetchPosts(
params
);
return (
<div>
<Layout_Mobile></Layout_Mobile>
<Layout_PC>
<PostDetailPage
title={title}
description={summary}
content={content}
author={author}
date={createdAt}
/>
</Layout_PC>
</div>
);
};
export default page;
字符串
我真的很想解决这个问题...
3条答案
按热度按时间iih3973s1#
在Next.js版本13中,您可以使用axios库来获取数据并实现静态站点生成(SSG)。要使用axios实现SSG行为,您可以在页面中使用getStaticPaths和getStaticProps函数。以下是如何修改代码的示例:
字符串
在这个例子中:
我用
axios.get
替换了fetch
函数来获取数据。我引入
getStaticPaths
来指定应该为其生成静态页面的动态路径。我使用
getStaticProps
来获取给定路径的特定post数据。relj7zay2#
原生获取Web API也在React和Next.js中进行了扩展。它自动删除获取请求,并提供一种灵活的方式来获取,缓存和重新验证组件级别的数据。这意味着静态站点生成(SSG),服务器端渲染(SSR)和增量静态再生(ISR)的所有好处现在都可以通过一个API获得:
字符串
此信息来自:https://nextjs.org/blog/next-13
您可以使用revalidate选项:重新验证是清除数据缓存并重新获取最新数据的过程。当您的数据更改并且您希望确保显示最新信息时,这很有用。在Next版本13中,只有使用fetch,您才可以为getStaticProps做出类似的行为,我希望这对您有用。
6ie5vjzr3#
Axios与Next.js 13配合使用完全没问题,但我建议使用SWR [React Hooks for Data Fetching]。它基于称为stale-while-revalidate的概念。使用SWR,组件将不断自动更新数据流。