为何Next.js服务端组件中的服务端操作需添加'use server'指令？

• 区分渲染逻辑与可触发操作：服务端组件默认在服务端完成渲染，但组件里的普通函数只是渲染过程中执行的逻辑（比如获取数据用于渲染），而'use server'标记的是可被客户端主动触发的服务端操作（比如表单提交、数据修改）——这类操作不是渲染时自动执行，而是需要用户交互触发，需要明确标识让Next.js识别并处理其调用机制。

• 代码隔离与安全保障：添加'use server'后，Next.js会确保这些函数的代码不会被打包到客户端 bundle 中，避免敏感逻辑（如数据库操作、密钥使用）泄漏到前端。即使是服务端组件里的函数，没有这个标记的话，若被不小心传递到客户端组件（比如作为props），可能存在风险，而'use server'会强制这类函数只能在服务端执行，且调用时通过安全的RPC机制。

• 明确操作边界：Next.js的服务端组件体系中，'use server'是服务端操作的官方标识，统一了“服务端可调用操作”的定义——不管是在服务端组件还是客户端组件中定义服务端操作，都需要这个标记，保持了API的一致性，也让框架能正确处理函数的调用路由、错误处理等逻辑。

举个简单例子：

// 服务端组件中的普通渲染逻辑（无需'use server'）
async function fetchPosts() {
  const res = await fetch('https://api.example.com/posts', { cache: 'no-store' });
  return res.json();
}

// 需要被客户端触发的服务端操作（必须加'use server'）
async function createPost(formData) {
  'use server';
  // 这里是数据库写入等敏感操作，只会在服务端执行
  await db.posts.create({
    data: {
      title: formData.get('title'),
      content: formData.get('content')
    }
  });
}

在上面的代码中，fetchPosts是渲染时执行的逻辑，属于服务端组件的常规工作；而createPost是需要用户提交表单触发的操作，必须用'use server'标记，让Next.js知道这是一个可被客户端调用的服务端操作。

内容的提问来源于stack exchange，提问作者ChenLee