Next.js 14中客户端组件调用的Server Actions是否会被打包下发至客户端？

核心结论 #

你完全可以放心在客户端组件中调用标记了"use server"的Server Actions，服务器端代码不会泄露到浏览器，这是Next.js内置机制保证的。

为什么浏览器里看不到Server Actions的代码？ #

当你给函数加上"use server"指令后，Next.js会自动完成以下处理：

• 把Server Actions的实际逻辑编译并部署在服务器端，不会打包进客户端代码。
• 客户端拿到的只是一个轻量的调用存根（stub），它的作用仅触发向服务器的POST请求，由服务器执行对应的Server Actions逻辑后，再把结果返回给客户端。
  所以你在浏览器开发者工具里看不到getPosts内部的fetch逻辑，是正常且正确的表现。

server-only的作用是什么？ #

server-only是额外的构建时安全校验工具，不是必须项，但非常推荐添加：

• 它的核心作用是防止你（或团队成员）误将未标记"use server"的服务器敏感代码导入到客户端组件。如果出现这类错误，构建过程会直接抛出异常，提前阻止敏感代码被打包到客户端。
• 对于已经正确标记"use server"的Server Actions，Next.js本身已经做了隔离，但添加server-only相当于多了一层保险，避免后续代码修改时出现疏漏。

对你的代码建议 #

1. 保留"use server"指令：这是Server Actions生效的核心，必须在包含Server Actions的文件顶部添加。
2. 加上import "server-only";：在你的app/actions/post.ts文件顶部导入这个包，作为构建时的安全校验，提前发现潜在错误。
3. 正常在客户端组件调用即可：你当前在page.tsx里的调用方式完全没问题，不存在代码泄露风险。

修改后的app/actions/post.ts示例：

"use server";
import "server-only";

export async function getPosts() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const data = await res.json();
  return data;
}

内容的提问来源于stack exchange，提问作者k-waka