寻求ASP.NET Core 6 Razor Pages整合React SSR的可行方案

针对你遇到的InertiaJs停更、旧SSR包过时的问题，以下是几个适用于.NET 6及以上版本的整合方案：

• 原生工具链整合（最推荐）
  .NET 6及以后版本官方支持与React项目的协同工作，步骤如下：

  1. 新建Razor Pages项目，然后在项目目录下用npx create-react-app ClientApp创建React客户端项目
  2. 修改React项目的package.json，将构建输出目录设为Razor Pages项目的wwwroot/react
  3. 在Razor Pages的Program.cs中添加静态文件中间件，确保能访问React构建资源：

     app.UseStaticFiles();
     // 额外配置React静态资源访问
     app.UseStaticFiles(new StaticFileOptions
     {
         FileProvider = new PhysicalFileProvider(
             Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "react")),
         RequestPath = "/react"
     });
     

  4. 在需要嵌入React的Razor页面（比如Index.cshtml）中，添加React根节点并引入构建后的脚本：

     <div id="react-root"></div>
     <script src="/react/static/js/main.[hash].js"></script>
     <link rel="stylesheet" href="/react/static/css/main.[hash].css">
     

  5. 若需要从Razor Pages传递数据到React，可在页面中注入全局变量：

     <script>
         window.pageData = @Json.Serialize(Model.Data);
     </script>
     

     之后在React中直接读取window.pageData即可。

• Razor Pages作为API层，React独立部署
  这种方式将前后端职责分离，维护性更强：

  1. 在Razor Pages项目中，通过PageModel的OnGetAsync/OnPostAsync方法暴露API接口，或者直接添加API控制器
  2. 独立开发React项目，使用axios/fetch等工具调用Razor Pages提供的接口
  3. React项目打包后可部署到Razor Pages的wwwroot目录，或单独部署，通过配置CORS解决跨域问题（在Program.cs中添加app.UseCors()配置）

• 自定义轻量SSR实现
  若需要SSR但找不到现成包，可以自行基于React 18+的新API实现：

  1. 使用Jering.Javascript.NodeJS这个NuGet包（替代过时的NodeServices），在.NET中调用Node.js执行React SSR
  2. 编写Node.js脚本，利用React的renderToPipeableStream（流式渲染）或renderToString将组件渲染为HTML字符串
  3. 在Razor Pages的PageModel中调用该脚本，将渲染后的HTML注入到页面中，并添加客户端hydration脚本完成激活

另外，.NET 8的Blazor Web App也支持混合渲染模式，你可以在同一个项目中同时使用Razor Pages和React，通过JS互操作实现数据传递，这也是一个值得尝试的方向。

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