Next.js Server Actions 是如何用 HTTP 实现 RPC 的？
<h2 id="-背景">🧠 背景</h2><p>在传统前端中，我们通过 <code>fetch('/api/xxx')</code> 或 <code>axios.post(...)</code> 与后端通信，采用的是显式的 HTTP 请求调用。</p>
<p>但从 Next.js App Router 开始，我们有了一个全新的通信方式 —— <strong>Server Actions</strong>。</p>
<p>Server Action 看起来只是一个异步函数：</p>
<p><code>async function updateName(formData: FormData) { 'use server' ... }</code></p>
<p>但实际上，它是一种 HTTP RPC 函数调用模型，Next.js 在背后自动帮我们：</p>
<ul>
<li>注册服务端处理器</li>
<li>生成调用 ID</li>
<li>提供客户端 proxy</li>
<li>通过 HTTP 完成远程调用</li>
</ul>
<br>
### 🧩 一句话理解 | TL;DR
<blockquote>
<p>✅ Next.js Server Actions 是一种用 HTTP POST 模拟函数调用的轻量 RPC 协议。</p>
<p>✅ Next.js Server Actions are a lightweight RPC mechanism implemented via HTTP POST.<br>
<br></p>
</blockquote>
<h2 id="编译阶段生成代理--compile-time-proxy-generation">编译阶段生成代理 | Compile-Time Proxy Generation</h2>
<p>Next.js 编译器会：</p>
<ol>
<li>
<p>为函数生成唯一的 ID，如 <strong>ACTION</strong>/abc123</p>
</li>
<li>
<p>生成对应 handler 文件 .next/server/app/<strong>ACTION</strong>/abc123.js，内容大致如下：</p>
</li>
</ol>
<p>Next.js compiler will:</p>
<p>Generate a unique ID like <strong>ACTION</strong>/abc123</p>
<p>Create a handler file like .next/server/app/<strong>ACTION</strong>/abc123.js containing:</p>
<pre><code class="language-ts">import { updateName } from '../../../../app/page';
export default async function handler(req) {
const formData = await req.formData();
return await updateName(formData);
}
</code></pre>
<ol start="3">
<li>客户端拿到代理函数 | Client Receives a Proxy Function<br>
<client action="{createAction}"> 拿到的并不是原来的Action，而是一个Proxy对象！</client></li>
</ol>
<pre><code class="language-js">{
$$typeof: Symbol(server_action),
id: '__ACTION__/abc123',
bound: []
}
</code></pre>
<br>
<h2 id="当客户端点击事件">当客户端点击事件</h2>
<p>1.表单触发请求 | Form Triggers RPC Call</p>
<p>点击提交后，浏览器发送一个 POST 请求：<br>
When the form is submitted, the browser sends a POST request:</p>
<pre><code class="language-http">POST /__ACTION__/abc123
Content-Type: multipart/form-data
name=NewName
</code></pre>
<br>
2.服务端 handler 匹配并执行原函数 | Server Dispatches to Real Function
<p>服务端路由匹配到 /<strong>ACTION</strong>/abc123</p>
<p>Next.js 调用编译生成的 handler</p>
<p>handler 内部再调用 updateName(formData)</p>
<p>The server routes the request to /<strong>ACTION</strong>/abc123</p>
<p>Next.js executes the compiled handler</p>
<p>The handler then invokes updateName(formData)<br>
<br></p>
<h2 id="-为什么这是一种-rpc-why-is-this-considered-rpc">🚀 为什么这是一种 RPC？| Why Is This Considered RPC?</h2>
<p>✅ 调用的是函数，不是 URL</p>
<p>✅ 自动绑定参数、执行、响应</p>
<p>✅ 无须手动写路由或 fetch</p>
<p>✅ 像调用本地函数一样使用服务端逻辑</p>
<p>✅ You call a function, not a URL</p>
<p>✅ Parameters, execution, and response are handled automatically</p>
<p>✅ No need to write routes or fetch calls manually</p>
<p>✅ Looks like a local function call but runs on the server<br>
<br></p>
<h2 id="-总结--conclusion">📚 总结 | Conclusion</h2>
<p>Server Actions 是 RSC 世界下最接近“函数即服务（Function as Resource）”的架构模型。</p>
<p>Server Actions represent the most direct form of function-as-resource architecture in the RSC ecosystem.</p>
<p>它优雅地用 HTTP 实现了轻量级 RPC 调用，并融合在 React 组件层级里。<br>
This elegantly embeds RPC over HTTP inside the component hierarchy of React.</p>
<p>Server Actions 正在重新定义我们对“前端调用服务”的理解 —— 让组件之间的“逻辑跳跃”变成了“函数调用”。<br>
Server Actions are redefining how frontend calls backend — turning network jumps into seamless function calls.</p>
<p>这正是前后端融合的开始，也是全栈工程师时代的技术演进。<br>
This marks the beginning of frontend-backend convergence — a milestone in the evolution of full-stack engineering.</p><br><br>
来源：https://www.cnblogs.com/sabertobih/p/18926397
頁:
[1]