如何在Express服务端获取React应用API数据以动态更新meta标签

你的核心问题是需要在Express返回HTML之前，提前拿到对应slug的文章数据，再替换meta占位符，具体修改步骤如下：

步骤1：安装请求依赖（调用外部接口拿数据的场景需要） #

如果你是通过第三方接口获取文章数据，先安装Node环境可用的请求库node-fetch；如果文章数据存在当前服务关联的数据库，直接查库即可，跳过这步：

npm i node-fetch@2

步骤2：修改Express动态路由逻辑 #

调整server.js中/:type/:slug路由的逻辑，先拉取文章数据再替换meta占位符：

const express = require('express');
const path = require('path');
const fs = require('fs');
const fetch = require('node-fetch');
const PORT = 5000;
const app = express();

app.get("/", (req, res) => {
  const filePath = path.resolve(__dirname, "./client/build", "index.html");
  fs.readFile(filePath, "utf8", (err, data) => {
    if (err) return console.log(err);
    data = data.replace(/__TITLE__/g, "首页标题").replace(/__DESCRIPTION__/g, "首页描述");
    res.send(data);
  })
})

app.get('/:type/:slug', async (req, res) => {
  const { slug } = req.params;
  const filePath = path.resolve(__dirname, "./client/build", "index.html");
  let postData = null;

  // 先拉取对应slug的文章数据，替换成你实际使用的接口地址
  try {
    const apiRes = await fetch(`你的接口基础地址/${slug}`);
    postData = await apiRes.json();
  } catch (e) {
    // 接口请求失败返回404或默认meta
    return res.status(404).send('文章不存在');
  }

  fs.readFile(filePath, "utf8", (err, data) => {
    if (err) return console.log(err);
    // 用实际文章数据替换占位符
    data = data
      .replace(/__TITLE__/g, postData.title)
      .replace(/__DESCRIPTION__/g, postData.description)
      // 可选优化：注入初始数据到HTML，避免React重复请求
      .replace('__INITIAL_DATA__', JSON.stringify(postData));
    res.send(data);
  })
});

app.use(express.static(path.resolve(__dirname, "./client/build")));

app.listen(PORT, () => {
  console.log(`服务运行在端口: ${PORT}`);
})

步骤3：可选优化React组件，避免重复请求 #

调整Post组件逻辑，优先读取服务端注入的初始数据，没有的情况下再发请求，减少不必要的网络消耗：

const Post = () => {
  const [post, setPost] = useState(window.__INITIAL_DATA__ || null)
  const { slug } = useParams();

  useEffect(() => {
    // 已经有服务端注入的数据就不用再发请求
    if (window.__INITIAL_DATA__) {
      delete window.__INITIAL_DATA__;
      return;
    }
    const urlFetch = '你的接口基础地址' + slug;
    fetch(urlFetch )
      .then(response => response.json())
      .then(data => setPost(data));
  }, [slug]);

  if (!post) {
    return (<> //加载状态 </>)
  }
  return (<> //组件内容 </>);
}
export default Post;

同时需要在React项目的public/index.html中加一行全局变量占位符，放在</body>标签之前即可：

<script>window.__INITIAL_DATA__ = '__INITIAL_DATA__'</script>

注意事项 #

• 如果文章数据存在当前Express服务关联的数据库，直接在路由内查库拿数据即可，不用再发fetch请求，性能更高
• 替换meta内容时建议做XSS过滤，避免文章标题/描述中的恶意代码注入到页面中
• 后续如果需要支持og标签、关键词等更多meta字段，只要在index.html中添加对应占位符，服务端拿到数据后同步替换即可

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