个人中心
gpt4 book ai didi

typescript - 如何清除 NextJs GetStaticPaths 缓存/"unpublish"动态路由？

转载 作者：行者123 更新时间：2023-12-03 17:22:58 24 4
gpt4 key购买 nike

我认为这是一个非常普通的问题，但我在谷歌上找不到任何东西。
我正在学习 NextJs(使用 TypeScript)并且我有一个站点成功地使用动态路由、SSR 和增量再生，所有设置和部署到 Vercel。这是 GetStaticProps 的示例和 GetStaticPaths我的动态路由处理程序中的代码:

export const getStaticPaths: GetStaticPaths = async () => {
    const routes = new CmsHelper().GetRoutes();

    const paths = (await routes).items.map((item, index, items) => {
        return item.fields.urlPath;
    })

    return {
        paths: paths,
        fallback: 'blocking',
    };
}

export const getStaticProps: GetStaticProps = async (context) => {
    const urlParts = context.params?.url as string[] || [];
    const urlPath = `/${urlParts.join('/')}`;
    const article = await new CmsHelper().GetArticle(urlPath);
    return {
        props: {
            article
        },
        revalidate: 10,
    }
}
如果我请求在构建时间后在 cms 中发布的新路径，它会成功地在服务器上重新生成并返回页面。
到现在为止还挺好。
但是，如果我在我的 CMS 中取消发布路由......它仍然由应用程序返回，除非我重建和重新部署(或以其他方式导致进程重新启动，在开发中)。
所以我的问题是:如何动态地使 NextJs 从其 GetStaticPaths 缓存中删除动态路由？
我明白 GetStaticProps由于 revalidate，最多每 10 秒调用一次配置。但据我所知， GetStaticPaths仅当请求来自当前未缓存的路由时才会被调用(？)
换句话说，对于与 headless CMS 的集成，如何在不触发重建/部署的情况下支持使用 NextJs 取消发布或重命名页面？
提前致谢!

最佳答案

也许尝试这种方法描述 here .
此处也提供代码以供引用。

// pages/blog/[slug].js

import {useRouter} from 'next/router'
import DefaultErrorPage from 'next/error'

export async function getStaticProps({ params }) {
  // fetch data from CMS through params
  const post = await getBlogItem(params.slug)
  return {
    props: {
      post
    }
  }
}

export async function getStaticPaths() {
  return {
    fallback: true,
    paths: []
  }
}

export default function MyPage({post}) {
  const router = useRouter()

  if(router.isFallback) {
     return <h1>Loading...</h1>
  }

  // This includes setting the noindex header because static files always return a status 200 but the rendered not found page page should obviously not be indexed
  if(!post) {
    return <>
      <Head>
        <meta name="robots" content="noindex">
      </Head>
      <DefaultErrorPage statusCode={404} />
    </>
  }

  return <h1>{post.title}</h1>
}
因此，与其删除/清除缓存，不如尝试成功处理您正在获取的内容“未发布”，如果是这样，您可以显示 404 Not found页面或您选择的内容。
像这样的东西: 
export async function getStaticProps(context) {

    const {params: {id}} = context

    let data;
    try {
        data = await httpClient...
    } catch (err) {
        if (not err is caused due to content being unpublished){
            // re throw it
            throw err;
        }
        // Else handle it gracefully
        data = null;
    }

    return {
        props: {
            data,
        },
        revalidate: 1
    };
}
然后在您的 View 上: 
export default function Data(props) {
    const {data} = props;

    const router = useRouter()

    // If the page is not yet generated, this will be displayed
    // initially until getStaticProps() finishes running
    if (router.isFallback) {
        return <div>Loading...</div>
    }

    if (!data) {
        return (
            <>
                <Head>
                    <meta name="robots" content="noindex"/>
                </Head>
                <DefaultErrorPage statusCode={404}/>
            </>
        )
    }

    return <DataView {...data} />;

}

关于typescript - 如何清除 NextJs GetStaticPaths 缓存/"unpublish"动态路由？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65526754/

24 4 0
文章推荐： opencl - amdgpu-pro 安装失败，现在依赖问题
文章推荐： python - Pandas pivot_table 因列和边距而失败
文章推荐： CreateML 数据分析停止
文章推荐： javascript - TFJS 模型仅预测二元分类任务的相同值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com