在 NextJS 13 中，如何动态更新服务器端渲染组件中的数据？

Question

作为 NextJS 13 的首次用户，我正在关注他们的 App 目录结构。我已经实现了一个服务器端渲染组件，它使用 Prisma 从我的数据库中检索类别，并将它们显示为页面上的列表。此外，我有一个客户端组件，其中包括一个“添加”按钮，它触发一个带有文本框的模式和一个“提交”按钮以在数据库中创建一个新类别。

现在，这就是我遇到问题的地方。由于客户端组件依赖于 UseState 的状态管理，因此它无法直接访问 Prisma 在服务器上创建新类别。首先，执行此操作的首选方法是什么？我应该定义新的 API 路由并直接从客户端组件发布数据吗？

其次，我的主要问题是，如何在服务器端组件中动态显示新发布的数据，而不需要整个页面刷新？特别是，有没有一种方法可以将新类别无缝添加到现有列表中，而无需重新加载整个页面？

Answer 1

至少到目前为止，不可能像在客户端更新状态那样更新服务器组件的状态。要使用 prisma，您应该定义路由处理程序。推荐的路径将位于/api/route.ts为您的页面提供服务的同一目录中。或者，如果您选择，也可以将pages/api其用于 REST API 路由。