使用api数据更新实时next.js页面

问题描述

我正在node.js（使用react.js和next.js）中建立一个汽车零件查询网站。每次用户进行选择时，我都需要查询数据库以填充下一个选择框的选项。

示例：用户选择一个年份，例如2000。然后，我必须查询数据库以获取该年份制造汽车的制造商的列表。我必须重复模型，引擎类型和零件类别的过程。

我不想将数据库公开给浏览器，因此我在Next.js中构建了一个API路由来查询数据库并返回填充选择框所需的数据。这行得通，一切都很好。该过程如下：

1. 在页面加载时，我使用getServerSideProps()生成带有nonce-next的随机数。
2. 当用户进行选择时，onChange方法将使用所需的查询参数和随机数触发API调用（POST）。
3. 服务器返回的数据将更新用于填充下一个选择框的状态以及新的随机数。
4. 做出最终选择后，onChange方法将触发零件数据的加载。

这在本地运行良好，但是当我部署到Vercel时，它中断了。如果我删除了nonce逻辑，它会起作用，因此Vercel似乎不喜欢nonce-next。

我不禁想到还有一个更优雅的解决方案。

• 是否有一种方法可以利用生命周期方法来实现同一目标？
• 有一个react钩子可以简化吗？
• 在零件加载之前，我应该打开WebSocket吗？

我缺少明显的东西吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）