客户端组件中调用的服务器操作是否已捆绑并发送到客户端？

Question

我正在使用 Next.js v14 和应用程序路由器开发一个应用程序。

我正在使用服务器操作创建数据检索等功能。最初，我了解到将使用服务器操作定义的函数导入客户端组件会导致代码被捆绑并泄漏到客户端。因此，我相信“仅服务器”的存在是为了防止这种情况发生。

但是，在浏览器中检查时，我找不到与服务器操作内容对应的部分。如果代码没有泄漏，则意味着我可以毫无顾虑地在客户端组件中调用服务器操作函数。我的理解正确吗？我很困惑，因为不同的文章陈述了不同的事情。

// app/actions/post.ts
"use server";
// import "server-only";

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

// app/page.tsx
"use client";
import { getPosts } from "@/app/actions/post";
import React, { useEffect } from "react";

export default function page() {
  async function fetchPosts() {
    const post = await getPosts();
    console.log(post);
  }

  return (
    <div>
      <h3>post</h3>
      <div>
        <button onClick={fetchPosts} />
      </div>
    </div>
  );
}

Answer 1

最初，我理解导入服务器定义的函数 对客户端组件的操作将导致代码被捆绑并且 泄露给客户端。因此，我相信“仅服务器” 存在就是为了防止这种情况发生。

不会，服务器组件和服务器操作不会导致任何代码泄漏。它们在服务器上运行，并且仅将计算出的响应发送到客户端。对于服务器组件，服务器使用包含 React 服务器组件负载（RSC Payload）的数据块响应客户端，然后这些数据块在客户端上呈现。您可以在 Next.js 的文档页面部分上了解服务器组件的渲染如何工作。此外，

server-only

允许您限制访问或导入标有

use-server

的模块。当您将

use-server

导入到带有

use-server

标记的模块时，它无法从客户端组件导入，这对于“仅限客户端”包也是如此。

server-only

包的

package.json

文件说明：

这是一个标记包，指示模块只能在服务器组件中使用。

但是，在浏览器中检查时，我找不到零件 对应服务器动作内容。如果代码没有 泄漏，这意味着我可以在客户端调用服务器操作函数 组件，无需任何顾虑。我的理解正确吗？我是 因为不同的文章陈述不同的事情而感到困惑。

是的，您的理解是正确的。我建议您阅读文档部分数据获取和渲染。这些文档页面很好地解释了幕后发生的事情。