React+Express服务端SSR动态修改HTML及静态资源托管方案咨询

核心实现思路 #

• 用 cheerio 作为服务端DOM操作工具，它的API和jQuery完全对齐，不需要引入模板引擎，直接操作原始HTML字符串
• 调整Express中间件顺序，优先处理静态资源请求，仅对需要修改的HTML页面走自定义处理逻辑

具体实现步骤 #

1. 安装依赖 #

npm install cheerio

2. 完整代码实现 #

const express = require('express')
const fs = require('fs')
const path = require('path')
const cheerio = require('cheerio')
const app = express()
const port = 3000

// 优先挂载静态资源中间件，所有css、js、图片等资源会直接返回，不会走后面的路由逻辑
app.use(express.static('public'))

// 仅对根路径的index.html做自定义处理
app.get("/", (req, res) => {
  // 读取本地public目录下的原始index.html
  const htmlPath = path.join(__dirname, 'public', 'index.html')
  fs.readFile(htmlPath, 'utf8', (err, rawHtml) => {
    if (err) {
      return res.status(500).send('页面加载失败')
    }
    // 用cheerio解析为DOM结构
    const $ = cheerio.load(rawHtml)
    // 在这里做你需要的DOM操作，和jQuery用法完全一致
    // 示例1：给id为title的元素替换内容
    $('#title').text('动态生成的标题')
    // 示例2：给id为container的元素插入新节点
    $('#container').append('<div class="card">动态插入的卡片</div>')
    // 示例3：删除id为deprecated的元素
    $('#deprecated').remove()
    // 将修改后的DOM转为HTML字符串返回
    const modifiedHtml = $.html()
    res.send(modifiedHtml)
  })
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

3. 注意事项 #

• 静态资源中间件 express.static('public') 必须放在自定义HTML处理路由的前面，否则静态资源请求会被自定义路由拦截，导致样式、脚本加载失败
• 如果需要处理其他路径的HTML页面，按照相同逻辑新增对应路由即可，没有匹配到自定义路由的请求仍然会走静态资源逻辑
• cheerio支持几乎所有常用的jQuery DOM操作API，直接按照jQuery的写法操作即可，不需要额外学习成本

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