如何解决使用api数据更新实时next.js页面
我正在node.js(使用react.js和next.js)中建立一个汽车零件查询网站。每次用户进行选择时,我都需要查询数据库以填充下一个选择框的选项。
示例:用户选择一个年份,例如2000。然后,我必须查询数据库以获取该年份制造汽车的制造商的列表。我必须重复模型,引擎类型和零件类别的过程。
我不想将数据库公开给浏览器,因此我在Next.js中构建了一个API路由来查询数据库并返回填充选择框所需的数据。这行得通,一切都很好。该过程如下:
- 在页面加载时,我使用
getServerSideProps()
生成带有nonce-next的随机数。 - 当用户进行选择时,onChange方法将使用所需的查询参数和随机数触发API调用(POST)。
- 服务器返回的数据将更新用于填充下一个选择框的状态以及新的随机数。
- 做出最终选择后,onChange方法将触发零件数据的加载。
这在本地运行良好,但是当我部署到Vercel时,它中断了。如果我删除了nonce逻辑,它会起作用,因此Vercel似乎不喜欢nonce-next。
我不禁想到还有一个更优雅的解决方案。
- 是否有一种方法可以利用生命周期方法来实现同一目标?
- 有一个react钩子可以简化吗?
- 在零件加载之前,我应该打开WebSocket吗?
我缺少明显的东西吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。