[英]NEXT.js ISR remove static page
我对 ISR 有一点问题。 我有 revalidate 道具等于 1 像这里
export async function getStaticProps({ params }) {
const data = await client.getEntries({
content_type: "product",
"fields.name": params.slug,
});
if (!data.items[0]) {
return {
notFound: true,
};
}
return {
props: {
article: data.items[0],
revalidate: 1,
},
};
}
当我在 Contentful 中创建产品时,页面按预期创建。 当我想进入不存在的页面时,我得到了预期的 404 错误。 当我在现有产品的 Contentful 中更改某些内容或删除它时,问题就开始了。
当我在 Contentful 中删除产品时,产品页面中的产品列表会更新并且产品会消失,但我仍然可以进入该产品的页面。 此外,当我重命名产品名称时,产品列表会更新,但我仍然可以进入较早的页面名称。
有什么办法可以解决这个问题吗?
获取静态路径
export async function getStaticPaths() {
const data = await client.getEntries({
content_type: "product",
});
return {
paths: data.items.map((item) => ({
params: { slug: item.fields.name },
})),
fallback: true,
};
}
产品页面
const Article = ({ article }) => {
const router = useRouter();
if (router.isFallback) return <p>Loading...</p>;
return (
<div>
<h1>Hello! {article.fields.name}</h1>
<Link href="/about">
<a>Back to about!</a>
</Link>
</div>
);
};
编辑当我在我的 product77 版本中重新验证 static 页面后,在 Contentful 中将产品名称从“product77”更改为“product7”时仍然存在,我仍然可以进入该页面。
重新验证后不应该删除吗?
如果相应地配置了getStaticPaths
和getStaticProps
,则无法删除已删除的页面,但会使用 404 而不是使用On-demand Revalidation提供已删除的页面。
// /pages/blog/[...post].jsx
function Post({ postData }) {
return (
// ...
);
}
export async function getStaticPaths() {
const res = await fetch("https://.../posts");
const posts = await res.json();
// Prerender paths during build
const paths = posts.map((post) => ({
params: { post: post.id },
}));
return { paths, fallback: "blocking" };
}
export async function getStaticProps(context) {
const res = await fetch(`https://.../posts/${context.params.post}`);
const postData = await res.json();
if(!postData){
// The page doesn't exist in the CMS, return notFound to trigger a 404
return{
notFound: true,
revalidate: 30
}
}
// Return page props
return {
props: {
postData,
},
revalidate: 30,
};
}
上述代码的主要内容是:
getStaticPaths
中预渲染路径getStaticPaths
必须使用"blocking"
或true
作为fallback
值getStaticProps
中的未知路径(感谢后备)。 如果 CMS 中不存在该页面,则返回notFound: true
触发 404 页面然后,在 webhook 中使用按需重新验证方法:
// /pages/api/revalidate-post.js
export async function handler(req, res) {
try {
const reqBody = JSON.parse(req.body);
await res.revalidate(`/${reqBody.path}`);
return res.json({ revalidated: true });
} catch (err) {
return res.status(500).send("Error revalidating");
}
}
res.revalidate(
/${reqBody.path} )
使用来自getStaticProps
的逻辑调用对页面的全新评估。
现在,如果有人要删除 CMS 中的页面,并为已删除的页面路径触发上述重新验证 webhook 处理程序,那么该路径将提供 404 页面而不是原始页面。
然而,页面本身并没有从磁盘中删除。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.