Next.js Server Component未声明'use server'的行为及使用疑问

DevOps 小满

2026-7-3

Next.js 'use server' 引发的API请求差异问题解析

为什么加了'use server'后浏览器看不到API请求？

核心原因是执行环境的差异：

没写'use server'时，fetchTSEIndex函数若被客户端组件调用，请求会在浏览器端发起，所以浏览器网络标签能捕获到这个请求。
加了'use server'后，这个函数会被标记为Server Action，请求直接在Next.js服务器内部执行。浏览器只会接收最终渲染完成的页面数据，看不到服务器与第三方API之间的通信，因此网络标签里找不到该请求，但数据能正常返回。

要不要在文件里写'use server'？

必须写，理由如下：

密钥安全：代码中用到了process.env.API_KEY，这类敏感密钥绝对不能暴露给客户端。通过'use server'将请求逻辑放在服务器端执行，能彻底避免密钥泄露。
逻辑优化：Server Action可将数据请求逻辑隔离在服务器，减少客户端的网络请求，还能利用Next.js的服务器缓存、边缘计算等能力提升性能。

你的代码片段

'use server'
import axios from 'axios'

const apiTSEIndexUrl = '/IX0001'

export async function fetchTSEIndex() {
  try {
    const headers = {
      'X-API-KEY': process.env.API_KEY as string,
      'Content-Type': 'application/json'
    }
    const payload = {
      fields: 'open,high,low,close,volume'
    }
    const response = await axios.get(apiTSEIndexUrl, {
      headers: headers,
      params: payload,
    })
    return response.data.data
  } catch (error) {
    console.error('error:', error)
  }
}