[英]NEXT.js ISR remove static page
I have a little problem with the ISR.我对 ISR 有一点问题。 I have the revalidate prop equal 1s like here
我有 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,
},
};
}
When I create product in Contentful, the page is created as I expected.当我在 Contentful 中创建产品时,页面按预期创建。 When I want to entry to page that doesn't exist I get 404 error as expected.
当我想进入不存在的页面时,我得到了预期的 404 错误。 Problem starts when I change something in Contentful in existing product or I delete it.
当我在现有产品的 Contentful 中更改某些内容或删除它时,问题就开始了。
When I delete the product in Contentful, the list of products in the products page is updated and the product disappears but I can still entry in page of that product.当我在 Contentful 中删除产品时,产品页面中的产品列表会更新并且产品会消失,但我仍然可以进入该产品的页面。 Also when I rename the product name the list of products is updated but I still can entry to the earlier page name.
此外,当我重命名产品名称时,产品列表会更新,但我仍然可以进入较早的页面名称。
Is there any solution to solve this problem?有什么办法可以解决这个问题吗?
getStaticPaths获取静态路径
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,
};
}
Product page产品页面
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>
);
};
EDIT When I change product name from "product77" to "product7" in Contentful after revalidate static page in my build for product77 still exist and I still can entry to that page.编辑当我在我的 product77 版本中重新验证 static 页面后,在 Contentful 中将产品名称从“product77”更改为“product7”时仍然存在,我仍然可以进入该页面。
Shouldn't it be removed after revalidation?重新验证后不应该删除吗?
Removed pages can't be deleted, but served with a 404 instead using On-demand Revalidation , if getStaticPaths
and getStaticProps
are configured accordingly.如果相应地配置了
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,
};
}
The main takeaway from the above code is:上述代码的主要内容是:
getStaticPaths
getStaticPaths
中预渲染路径getStaticPaths
must use "blocking"
or true
as the fallback
value getStaticPaths
必须使用"blocking"
或true
作为fallback
值getStaticProps
(thanks to fallback).getStaticProps
中的未知路径(感谢后备)。 If the page doesn't exist in the CMS, return notFound: true
triggering the 404 pagenotFound: true
触发 404 页面Then, using the On-demand revalidation approach in a webhook:然后,在 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");
}
}
The res.revalidate(
/${reqBody.path} )
invokes a fresh evaluation of a page using the logic from getStaticProps
. res.revalidate(
/${reqBody.path} )
使用来自getStaticProps
的逻辑调用对页面的全新评估。
Now, if somebody would delete the page in the CMS, and trigger the above revalidation webhook handler for the deleted page path, then the path serves a 404 page instead of the original page.现在,如果有人要删除 CMS 中的页面,并为已删除的页面路径触发上述重新验证 webhook 处理程序,那么该路径将提供 404 页面而不是原始页面。
The page itself, however, is not deleted from the disk.然而,页面本身并没有从磁盘中删除。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.