Nuxt3中useFetch服务端取数及客户端私有运行时配置访问问题

在Nuxt3静态生成（SSG）场景中使用useFetch时遇到两个核心问题：

1. 调用接口时使用Nuxt的public运行时配置，导致敏感配置暴露到客户端
2. 想明确两个问题：
   • 客户端能否访问私有运行时配置
   • 如何让useFetch仅在服务端（静态生成阶段）获取数据，客户端直接复用预生成的静态数据

现有代码片段 #

if (process.server) {
  const { data: article } = await useFetch(endpoint, {
    headers: {
      Id: runTimeConfig.public.APP_ID,
      Secret: runTimeConfig.public.APP_SECRET,
      partner: runTimeConfig.public.PARTNER,
    },
  });

  nuxtApp.payload.data = article.value;
  artikelData = ref(nuxtApp.payload.data);
} else {
  artikelData = nuxtApp.payload.data;
}

问题解答与优化方案 #

1. 客户端无法访问私有运行时配置 #

Nuxt3的私有运行时配置（runtimeConfig下非public字段）仅服务端可用，不会被打包到客户端代码中，这是安全设计的要求——敏感信息绝对不能暴露到前端。所有需要用到敏感配置的请求，必须在服务端完成。

2. 让useFetch仅在服务端执行，客户端复用静态数据 #

Nuxt3的useFetch内置了SSG场景的处理逻辑，无需手动判断process.server，通过配置即可实现需求：

优化后的代码

const { data: artikelData } = await useFetch(endpoint, {
  // 强制仅在服务端发起请求（静态生成阶段执行）
  server: true,
  // 直接使用私有运行时配置，避免敏感信息泄露
  headers: {
    Id: useRuntimeConfig().APP_ID,
    Secret: useRuntimeConfig().APP_SECRET,
    partner: useRuntimeConfig().PARTNER,
  },
});

关键细节：

• server: true：确保请求只在服务端（静态生成或SSR阶段）执行，客户端不会重新发起请求，直接复用预生成的payload数据
• 私有配置的正确使用：将原来的runTimeConfig.public改为useRuntimeConfig()直接读取私有字段（需先在nuxt.config.ts中配置非public的runtimeConfig）
• 自动处理payload：useFetch会自动把服务端获取的数据注入到客户端的payload中，客户端直接用data即可，无需手动操作nuxtApp.payload

3. 原有代码的问题点 #

• 手动判断process.server并处理payload容易出错，比如静态生成时数据序列化异常会导致客户端数据缺失
• 把敏感的APP_SECRET放在public配置下，必然会暴露到客户端，这是严重的安全隐患，必须迁移到私有配置

配套配置：nuxt.config.ts 中设置私有运行时配置 #

export default defineNuxtConfig({
  runtimeConfig: {
    // 私有配置，仅服务端可访问（从环境变量读取）
    APP_ID: process.env.APP_ID,
    APP_SECRET: process.env.APP_SECRET,
    PARTNER: process.env.PARTNER,
    // public配置仅放非敏感的公开信息
    public: {
      // 例如：API_BASE_URL: process.env.API_BASE_URL
    },
  },
});

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