为什么要在 NextJS 的服务器组件中使用服务器操作？

Question

我了解客户端组件中服务器操作的使用，例如表单提交或任何其他突变。

对于数据获取，在服务器组件中我们可以直接访问数据库，这很棒。在客户端组件中，这有点棘手，但仍然有很好的解决方案，我使用的是 trpc + ReactQuery 组合。

但是我经常看到人们在服务器组件内使用服务器操作，而我无法弄清楚这一点，因为我们可以像前面提到的那样直接访问数据库。 那么为什么不创建一个简单的函数调用来执行该突变呢？为什么在服务器组件中使用服务器操作？

也许我错过了一些东西，但我找不到任何好的理由这样做。

我尝试了两种方法，但性能或我能想到的任何其他指标似乎没有显着差异。

Answer 1

但是我经常看到人们在服务器组件中使用服务器操作，我无法弄清楚这一点，因为我们可以直接访问数据库

是的，如果这就是他们所做的一切，那么他们就错了。您想要这样做的原因是，与常规函数不同，服务器操作可以跨客户端/服务器边界序列化并从客户端组件调用：

function SomeServerComponent() {
  async function updateDB(somevalue) {
    await dbClient.update('someKey', someValue);
  }

  return <ClientOnlyComponent onUpdate={updateDB} />;
}

这里将服务器操作函数作为道具传递给仅客户端组件，客户端可以正常调用它，并且构建过程/运行时跨客户端/服务器间隙处理序列化逻辑，而无需实际向客户端公开数据库接口.