如何使柯里化服务器功能在 nextjs 应用程序路由器上可靠地工作

Question

我正在测试将柯里化操作从

page.tsx

传递到

ClientComponent.tsx

的可能性 我这样做了：

page.tsx

'use server'

import { ClientComponent } from './ClientComponent'

export default async function Page() {
  const buttonAction = await curriedAction(`SOME CURRIED SERIALIZABLE VALUE FROM SERVER`)
  return <ClientComponent buttonAction={buttonAction} />
}

async function curriedAction(curriedValue: string) {
  return async function performCurriedAction(paramFromClient: string) {
    'use server'
    console.log(`curried action on curriedValue:${curriedValue} and paramFromClient:${paramFromClient}`)
  }
}

ClientComponent.tsx

'use client'

export function ClientComponent({ buttonAction }: { buttonAction(paramFromClient: string): Promise<void> }) {
  return <button onClick={() => buttonAction('SOME PARAM FROM CLIENT')}>click</button>
}

单击渲染页面上的按钮，我可以在服务器日志上看到使用柯里化值正确调用柯里化函数：

 GET /_next/webpack-hmr 404 in 778ms
curried action on curriedValue:SOME CURRIED SERIALIZABLE VALUE FROM SERVER and paramFromClient:SOME PARAM FROM CLIENT
 POST /test-curried-function 200 in 63ms

确实效果很好，这是一个令人兴奋的有用功能！

试图了解它是如何工作的，我注意到服务器柯里化字符串

"SOME CURRIED SERIALIZABLE VALUE FROM SERVER"

在从客户端获取的内容中不存在，

但是我注意到了这个动作

POST

打电话：

------WebKitFormBoundaryCw3dGNjpJ69USr7N
Content-Disposition: form-data; name="1"

"8ARFpkVVsFrIvcKvRbK4mZdVP8y01+1Ezoj0XUgq3uGdw1SDh0hZaiOJIHjo7lHZwwuDaY2yslgYaoJAFSm0sCYOs4dmZocXiR25igJRioFU6JvmmrJ6IhL5eh6dHeitNdyle9cWHsmXYzajC3HaWoiRmE4w2msqPso="
------WebKitFormBoundaryCw3dGNjpJ69USr7N
Content-Disposition: form-data; name="0"

["$@1","SOME PARAM FROM CLIENT"]
------WebKitFormBoundaryCw3dGNjpJ69USr7N--

明显有

"SOME PARAM FROM CLIENT"

我猜散列字符串封装了来自服务器的柯里化值

所以我尝试重新启动服务器，保持网页打开而不刷新
这次，单击按钮会使服务器抛出 :

✓ Compiled /test-curried-function in 4.4s (2103 modules)
 ⨯ Internal error: OperationError: The operation failed for an operation-specific reason
    at AESCipherJob.onDone (node:internal/crypto/util:445:19)
    at AESCipherJob.callbackTrampoline (node:internal/async_hooks:130:17)
digest: "3732802089"
Cause: [Error: Cipher job failed]
 POST /test-curried-function 500 in 4586ms

刷新页面，操作再次正常。

我猜这表明重新启动服务器，一些哈希密钥发生了变化
这将破坏可扩展的网络服务器（并且服务器也会重新启动）

我找不到解决此问题的文档
是否有可配置的

hash-secret

来保持一致的 Web 服务器部署？

Answer 1

我刚刚在我的应用程序中遇到了类似的错误。我相信这是由 Next 用于每个构建的服务器操作循环的加密密钥引起的。

来自文档： “为了防止敏感数据暴露给客户端，Next.js 会自动加密封闭变量。每次构建 Next.js 应用程序时，都会为每个操作生成一个新的私钥。这意味着操作只能被调用特定的构建。”

文档接着说您可以覆盖 process.env.NEXT_SERVER_ACTIONS_ENCRYPTION_KEY 变量以在构建之间保持一致的服务器操作加密密钥。

在此处了解更多信息https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#security