reactjs - 如何避免加载不存在的静态页面?
问题描述
我正在制作电子商务 Next.js 静态应用程序。
对于我的产品页面,我使用增量静态生成(我将进一步称其为 ISG),fallback: true
并简单useRouter
地显示加载组件(如微调器或其他东西,没关系)。ISG 对于数据更新频繁的静态站点(如添加评论、新产品等)非常有用,但如果我没有产品路径(例如/products/nike-pants-12345
),页面将返回“无限加载”和错误。
错误如下。
如果我们看一下控制台,我们可以看到类似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 }
}
解决方案
使后备“阻塞”而不是真正的
推荐阅读
- android - Lint 在组装发布目标时发现致命错误,添加语言 xml 文件
- php - unlink(/home/goode/public_html/private/uploads/405/):是一个目录,虽然file_exist被检查
- angular - 使用嵌套的 for 循环了解 Angular 的生命周期钩子和模板
- php - 使用 PHP 和 SQL Server 的登录脚本
- kentico - 扩展管理员用户网格 Kentico 10 的列
- php - 文件夹 public/vendor 没有通过 cf push 上传
- java - Google Guice 依赖注入 - 对象究竟是在哪里创建的?
- javascript - 在 Sharethis 的电子邮件中添加主题?
- hyperledger-fabric - 请参阅 CLI 中 first-network 中的“已获得状态:&{NOT_FOUND}”
- azure - 获取 Azure Web 应用的公共 IP