如何避免加载不存在的静态页面？

Question

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

对于我的产品页面，我使用增量静态生成（我将进一步称之为 ISG）和 fallback: true 以及简单的 useRouter 来显示加载组件（如微调器或其他东西，它没关系）。 ISG 对于经常更新数据（如添加评论、新产品等）的静态站点非常有用的功能，但如果我没有产品路径（例如 /products/nike-pants-12345），页面将 return “无限加载”和错误。

错误如下。

如果我们查看控制台，我们会看到类似这样的内容：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 }
}

Answer 1

使回退“阻塞”而不是 true

Answer 2

如果在 getStaticProps.

中找不到产品，您可以通过添加 product 和 return notFound: true 检查来触发 404 页面

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 }
}

如何避免加载不存在的静态页面？

How to avoid loading for nonexistent static pages?

reactjs

next.js

ssg