React.js SPA加载时传入服务器端初始状态信息的实现方案咨询

核心实现逻辑 #

完全可以通过Razor Pages向React应用传递初始状态，实现思路和你之前无框架SPA硬编码JS变量的逻辑完全一致，不需要额外依赖服务端渲染React组件的能力，也不用全走初始AJAX请求获取状态。
具体实现步骤：

1. 在Razor页面中，将服务端获取的初始数据序列化为JSON，挂载到window全局对象上，注意要在React打包产物引入前完成注入：

<!-- Razor .cshtml 页面代码 -->
<div id="root"></div>
<script>
  // Razor服务端渲染时会自动填充序列化后的JSON内容
  window.__APP_INITIAL_STATE__ = @Json.Serialize(new {
    Username = User.Identity.Name,
    AppVersion = "2.0.1",
    UserId = User.Claims.FirstOrDefault(c => c.Type == "UserId")?.Value,
    // 其他需要传递的自定义属性
  })
</script>
<!-- 引入React编译后的打包文件 -->
<script src="~/dist/react-app.bundle.js"></script>

2. React侧直接在入口文件读取全局变量即可，可直接传递给根组件或者初始化到状态管理工具中：

// React入口文件 index.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
// 读取服务端注入的初始状态，兜底为空对象避免报错
const initialState = window.__APP_INITIAL_STATE__ || {}

const root = ReactDOM.createRoot(document.getElementById('root'))
// 将初始状态传递给根组件，或用于初始化Redux、Zustand等状态库
root.render(<App initialState={initialState} />)

两种方案适用场景对比 #

• 服务端注入状态：适合你当前的Razor Pages托管场景，优势是少一次首屏API请求，避免加载时的内容闪烁，无需额外处理初始请求的权限校验逻辑，性能更优
• 初始AJAX拉取状态：适合纯静态部署、无服务端模板注入能力的场景，优势是前端状态逻辑完全自治，不需要维护服务端模板的注入变量
  你的场景下优先选择服务端注入方案即可，和你之前的开发习惯完全匹配。

注意事项 #

• 注入状态时直接使用Razor自带的Json.Serialize方法，会自动转义特殊字符避免XSS风险，不要手动拼接JSON字符串
• 所有注入到前端的内容都是公开可读取的，不要写入密码、接口密钥等敏感信息
• 注入的全局变量名建议取辨识度高的名称，避免和其他全局变量冲突

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