加载初始索引页时能否直接向React传递JSON数据？

你直接在后端生成的index.html里内联JSON数据就行，React应用不用发额外HTTP请求就能拿到数据。核心思路是把JSON挂载到全局window对象上，组件里直接读取即可。

具体实现步骤 #

1. 在index.html中注入JSON
   后端渲染页面时，添加一个<script>标签，把JSON数据赋值给window上的全局变量（注意要把JSON转成合法的JavaScript格式，转义特殊字符）：

<html>
  <head>
    <!-- 其他头部资源 -->
    <script>
      // 后端动态生成的初始数据
      window.__INITIAL_APP_DATA__ = {
        userId: "12345",
        profile: {
          name: "Blankman",
          avatar: "/assets/avatar.png"
        },
        settings: {
          darkMode: true,
          notifications: enabled
        }
      };
    </script>
  </head>
  <body>
    <div id="react-root"></div>
    <script src="/app.js"></script>
  </body>
</html>

2. 在React组件中读取数据
   在React代码里直接访问全局变量即可：

function ProfilePage() {
  // 直接获取内联的初始数据
  const initialData = window.__INITIAL_APP_DATA__;

  return (
    <div className="profile">
      <img src={initialData.profile.avatar} alt="用户头像" />
      <h2>{initialData.profile.name}</h2>
      <p>深色模式：{initialData.settings.darkMode ? "开启" : "关闭"}</p>
    </div>
  );
}

export default ProfilePage;

几个关键注意点 #

• 转义处理：后端生成JSON时必须转义双引号、换行符等特殊字符，避免破坏HTML结构或导致JavaScript语法错误。
• XSS防护：如果数据包含用户输入内容，一定要做XSS过滤，防止恶意脚本注入。
• 数据体积：别内联过大的JSON，否则会让初始HTML体积暴增，拖慢首屏加载速度。
• 类型兼容：用TypeScript的话，可以给window对象扩展类型声明，避免类型报错。

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