nginx的sub_filter模块在React站点不生效该如何解决？

1. React类单页应用（SPA）的核心内容均为客户端JavaScript执行后动态渲染生成，nginx sub_filter 模块仅能匹配替换源站返回的原始HTTP响应体中的静态文本，你配置中要匹配的<h1>标签及其内容不存在于首次请求返回的静态HTML中，因此无法命中规则。
2. 你的配置缺少sub_filter生效的必要前置配置：默认情况下sub_filter仅处理Content-Type: text/html的响应，且若源站返回gzip等压缩格式的响应，未解压的情况下字符串匹配也会失败。

场景1：仅需替换静态HTML中存在的内容（如页面标题、meta标签、静态写死的文本） #

补全nginx配置即可，完整配置如下：

location / {
    proxy_pass https://reactjs.org;
    # 清空接受压缩请求头，强制源站返回未压缩的响应内容
    proxy_set_header Accept-Encoding "";
    # 声明sub_filter需要处理的响应内容类型，按需添加即可
    sub_filter_types text/html application/javascript application/json;
    # 替换规则可简化为直接匹配文本，无需写完整标签结构，适配性更强
    sub_filter 'React' 'Test';
    sub_filter_once off;
    # 关闭自动保留原始修改时间，避免缓存问题
    sub_filter_last_modified off;
}

场景2：需要替换客户端动态渲染的内容 #

sub_filter无法直接处理动态生成的DOM内容，可通过注入JS脚本的方式实现替换，在上述完整配置的基础上新增一条替换规则，向页面注入DOM替换脚本：

# 在body闭合标签前插入替换脚本
sub_filter '</body>' '<script>
document.addEventListener("DOMContentLoaded", () => {
  function replaceAllText(node) {
    if (node.nodeType === Node.TEXT_NODE) {
      node.textContent = node.textContent.replace(/React/g, "Test");
    } else if (node.tagName !== "SCRIPT" && node.tagName !== "STYLE") {
      Array.from(node.childNodes).forEach(replaceAllText);
    }
  }
  replaceAllText(document.body);
  // 适配SPA路由切换场景，路由变化后重新执行替换
  const originalPushState = history.pushState;
  history.pushState = function() {
    originalPushState.apply(this, arguments);
    setTimeout(() => replaceAllText(document.body), 300);
  };
  window.addEventListener("popstate", () => {
    setTimeout(() => replaceAllText(document.body), 300);
  });
</script></body>';

注入的脚本会在页面加载完成、路由切换时自动遍历整个DOM，替换所有文本节点中的React为Test，适配所有动态渲染的内容。

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