React项目执行npm build时嵌入API响应生成静态HTML的实现问询

下面是几个实战常用的处理思路，能满足你把API响应内容嵌入静态HTML的需求：

1. 预构建脚本 + 静态数据文件 #

这是最轻量化的方案，不用改React项目的核心配置：

• 写一个Node.js脚本（比如fetch-api-data.js），在执行npm build前先拉取API数据并保存成静态文件：

// fetch-api-data.js
const fetch = require('node-fetch');
const fs = require('fs');

async function fetchData() {
  try {
    const res = await fetch('你的API地址');
    const data = await res.json();
    // 把数据写入public目录，React可以直接导入
    fs.writeFileSync('./public/api-data.json', JSON.stringify(data));
    console.log('API数据已成功写入静态文件');
  } catch (err) {
    console.error('拉取API数据失败:', err);
    process.exit(1);
  }
}

fetchData();

• 修改package.json里的build命令，让脚本先执行：

{
  "scripts": {
    "build": "node fetch-api-data.js && react-scripts build"
  }
}

• 在React组件里直接导入这个静态文件使用：

import apiData from '../public/api-data.json';

function App() {
  return <div>{apiData.content}</div>;
}

2. 使用Next.js的静态生成（SSG） #

如果你的项目是基于Next.js的，官方提供的静态生成功能天生适合这个场景：

• 在页面组件中导出getStaticProps函数，构建时Next.js会自动执行这个函数拉取数据，然后把数据注入到组件props里，最终生成包含数据的静态HTML：

// pages/index.js
export default function Home({ apiData }) {
  return <div>{apiData.content}</div>;
}

export async function getStaticProps() {
  const res = await fetch('你的API地址');
  const apiData = await res.json();

  return {
    props: { apiData }, // 这个props会被注入到组件，构建时嵌入HTML
  };
}

• 执行npm run build后，Next.js会生成完全静态的HTML文件，直接打开就能显示API数据。

3. 自定义Webpack插件（适配Create React App） #

如果需要更灵活的嵌入方式（比如直接把数据插入HTML模板的某个位置），可以通过自定义Webpack插件实现：

• 如果你用的是Create React App，先安装craco来修改Webpack配置（不用eject）：

npm install @craco/craco --save-dev

• 创建craco.config.js，添加自定义插件，利用html-webpack-plugin把API数据注入到HTML模板：

// craco.config.js
const fetch = require('node-fetch');
const HtmlWebpackPlugin = require('html-webpack-plugin');

class InjectApiDataPlugin {
  async apply(compiler) {
    compiler.hooks.compilation.tap('InjectApiDataPlugin', async (compilation) => {
      const apiData = await fetch('你的API地址').then(res => res.json());
      // 修改html-webpack-plugin的模板参数
      HtmlWebpackPlugin.getHooks(compilation).beforeTemplateExecution.tapAsync(
        'InjectApiDataPlugin',
        (data, cb) => {
          data.htmlWebpackPlugin.options.apiData = apiData;
          cb(null, data);
        }
      );
    });
  }
}

module.exports = {
  webpack: {
    plugins: [new InjectApiDataPlugin()],
  },
};

• 修改package.json的build命令为craco build，然后在public/index.html里用模板语法插入数据：

<!-- public/index.html -->
<body>
  <div id="root"></div>
  <script>
    window.API_DATA = <%= JSON.stringify(htmlWebpackPlugin.options.apiData) %>;
  </script>
</body>

• 之后React组件就可以通过window.API_DATA直接使用这些数据了。

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