如何在WordPress中实现React应用嵌入代码的服务端渲染？

要让React应用的文本内容出现在页面源码里，必须同时改造React应用和WordPress端的嵌入逻辑，以下是具体方案：

一、先改造React应用生成SSR兼容的输出 #

首先得让你的React应用支持服务端渲染，生成两个核心内容：

• 预渲染的静态HTML片段：就是React应用首次渲染后的DOM内容，对应原来<div id="assignid"></div>内部的部分。
• 客户端激活脚本：保留原来的defer脚本链接，但要把代码里的render改成hydrateRoot，这样React会复用已有的静态DOM节点，激活交互功能，不会重复渲染。

最终你需要的嵌入代码结构大概是这样：

<link href="stylelocation.css" rel="stylesheet"/>
<div id="assignid">
  <!-- 这里是React SSR生成的静态HTML内容 -->
  <div class="react-app-content">你的React应用初始内容...</div>
</div>
<script defer="defer" src="scriptlocation.js"></script>

客户端脚本示例：

import { hydrateRoot } from 'react-dom/client';
const root = hydrateRoot(document.getElementById('assignid'), <App />);

二、WordPress端的嵌入实现 #

方案1：自定义短代码（无需插件） #

直接在WordPress主题的functions.php里添加自定义短代码，用来插入SSR后的React内容：

function ssr_react_app_shortcode() {
    // 这里可以直接写死SSR后的HTML，或者通过API请求动态获取React应用的SSR输出
    $ssr_html = '<div class="react-app-content">你的React应用初始内容...</div>'; // 替换成实际的SSR HTML
    $embed_code = '
        <link href="stylelocation.css" rel="stylesheet"/>
        <div id="assignid">' . $ssr_html . '</div>
        <script defer="defer" src="scriptlocation.js"></script>
    ';
    return $embed_code;
}
add_shortcode('ssr_react_app', 'ssr_react_app_shortcode');

之后在WordPress页面编辑时，直接插入[ssr_react_app]短代码就能嵌入带SSR内容的React应用。

方案2：用插件简化管理 #

如果需要更灵活的配置（比如动态修改React应用地址、缓存SSR内容），可以用这些插件：

• Custom HTML Widget：适合在侧边栏或页面固定位置嵌入SSR代码片段。
• Shortcode UI：可以可视化管理短代码参数，方便非技术人员调整。
• 要是你的React应用独立部署，还可以结合WP REST API，在自定义函数里请求React服务的SSR接口，动态获取HTML后输出到页面。

关键注意事项 #

• 必须用hydrateRoot替代render，否则React会重新生成DOM，导致SSR内容失效。
• 缓存SSR生成的HTML内容，避免每次页面加载都重新请求或生成，提升WordPress性能。
• 保持CSS在HTML之前加载，避免页面出现样式闪烁。

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