Next.js 13服务器组件中'use server'的使用规范与安全性对比

安全性对比 #

两种实现的安全性完全等价。原因很简单：Server Components 的代码全程在服务器端执行，不会被打包编译到客户端的 JavaScript 资源中——不管你是直接在组件函数里写 fetch，还是封装到带 'use server' 的函数里，fetch 的目标地址、请求头里的敏感信息（比如密钥）、数据处理逻辑都不会暴露给前端用户。

'use server' 指令的核心作用不是“隐藏代码”，而是标记Server Action（服务器端动作），允许客户端通过交互（比如表单提交、按钮点击）触发这个函数的执行。但如果只是在 Server Component 内部调用这个封装函数，本质和直接写 fetch 没有安全层面的区别。

适用场景分析 #

直接在 Server Component 内写 fetch #

• 适合简单、单一的组件绑定逻辑：比如某个页面只需要这一处数据获取，逻辑短平快，不需要复用
• 代码更紧凑，不需要额外拆分函数，适合快速实现小型页面

示例：

interface Test {
  age: number,
  name: string,
  likes: number,
}
 
export default async function Home() {
  const res = await fetch('http://localhost:3001/test', { cache: 'no-cache' })
  const tests: Test[] = await res.json()

  return (
    <div className='flex flex-row'>
      {tests.map((test) => (
        <div key={test.name}>
          <div>{test.name}</div>
          <div>{test.age}</div>
          <div>Likes: {test.likes}</div>
        </div>
      ))}
    </div>
  )
}

封装到带 'use server' 的函数中 #

• 需要复用数据获取逻辑：比如多个 Server Component 都需要调用同一个接口获取数据，抽离成单独函数可以避免重复代码
• 逻辑复杂需要单独维护：比如 fetch 后有复杂的数据过滤、转换逻辑，抽离后更容易做单元测试或修改
• 未来可能需要客户端触发：如果之后要在 Client Component 里通过交互（比如点击按钮刷新数据）调用这个接口，封装成 Server Action 可以直接复用，不需要重新写逻辑
• 代码结构更清晰：遵循单一职责，把数据获取和组件渲染逻辑分离，便于团队协作维护

示例：

async function getData() {
  'use server'
  const res = await fetch('http://localhost:3001/test', { cache: 'no-cache' })
  return res.json()
}

interface Test {
  age: number,
  name: string,
  likes: number,
}
 
export default async function Home() {
  const tests: Test[] = await getData()

  return (
    <div className='flex flex-row'>
      {tests.map((test) => (
        <div key={test.name}>
          <div>{test.name}</div>
          <div>{test.age}</div>
          <div>Likes: {test.likes}</div>
        </div>
      ))}
    </div>
  )
}

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