1

我正在制作电子商务 Next.js 静态应用程序。

对于我的产品页面,我使用增量静态生成(我将进一步称其为 ISG),fallback: true并简单useRouter地显示加载组件(如微调器或其他东西,没关系)。ISG 对于数据更新频繁的静态站点(如添加评论、新产品等)非常有用,但如果我没有产品路径(例如/products/nike-pants-12345),页面将返回“无限加载”和错误。

错误如下。

ISG 页面不存在的错误

如果我们看一下控制台,我们可以看到类似TypeError: Cannot read property '_id' of null:这意味着应用程序没有找到具有请求 _id 的产品(可能是名称、slug 等)。

所以,问题是我怎样才能避免这种情况,应该避免这种情况吗?

export async function getStaticPaths() {
    await dbConnect()

    const products = await ProductModel.find({})

    const paths = products.map((doc) => {
        const product = doc.toObject()
        return {
            params: { id: product._id.toString() }
        }
    })

    /* fallback: true means that the missing pages
    will not 404, and instead can render a fallback */
    return { paths, fallback: true }
}

export async function getStaticProps({ params }) {
    await dbConnect()

    const product = await ProductModel.findById(params.id).lean()
    product._id = product._id.toString()

    // revalidate set the time (in sec) of re-generate page (it imitate SSR)
    return { props: { product }, revalidate: 30 }
}
4

2 回答 2

1

使后备“阻塞”而不是真正的

于 2021-01-17T19:02:54.237 回答
0

您可以通过添加检查来触发 404 页面,product如果notFound: truegetStaticProps.

export async function getStaticProps({ params }) {
    await dbConnect()

    const product = await ProductModel.findById(params.id).lean()

    if (!product) {
        return {
            notFound: true
        }
    }

    product._id = product._id.toString()

    // revalidate set the time (in sec) of re-generate page (it imitate SSR)
    return { props: { product }, revalidate: 30 }
}
于 2021-01-19T10:03:02.327 回答