是否可以在服务器端 Express Route 中提供客户端 React 组件/应用程序？答案

【问题标题】：Is it Possible to serve a Client Side React Component / Application in a server side Express Route?是否可以在服务器端 Express Route 中提供客户端 React 组件/应用程序？
【发布时间】：2018-08-17 04:44:41
【问题描述】：

我有一个 Node/Express 后端，它使用 Pug.js 来呈现许多服务器端路由。该应用程序目前是静态的，是一个简单的站点。

我使用 CRA 在 React.js 中创建了一个交互式“构建器”组件。它允许站点访问者以交互方式配置产品。最终目标是这样的：

当网站访问者点击构建器导航链接时，他们将被带到一个页面，该页面将呈现我的服务器端模板以保持网站的外观和感觉。但是，在内容块中，我想呈现我创建的反应应用程序。

我已经找了好几天了，也许只是不明白我所看到的。我不确定服务器端渲染或代理是否可以做到这一点？我已经尝试过 CRA 代理，但没有得到结果。

文件夹结构图片：

如果有人需要更多信息或可以指出一些资源，那将非常有帮助。

我还在学习，如果这违反了任何 SO 准则，我深表歉意。

提前谢谢你

【问题讨论】：

抱歉，澄清一下，您对大多数路由都使用模板引擎，但是对于一个路由您想加载一个 React 应用程序，并且您想使用 SSR（服务器端渲染）？
当 React 应用程序在客户端呈现时，您是否可以正常工作？我会先为此拍摄，然后在 SSR 上工作。这个问题是相关的stackoverflow.com/q/37895635/3518108
山姆，谢谢您的提问。是的，当 React 应用程序在客户端上呈现时它正在工作。至于澄清。我想做什么工作????。所有静态站点路由都使用 Pug 作为视图引擎和公共目录来呈现服务器端以提供静态资产。我不清楚的是两件事。首先，我是否需要使用 SSR 来实现所需的功能？其次，如果不是，在 Express 路由器端点中服务 React 应用程序的最佳方式是什么？我只是希望将 React 应用程序作为一个块在 pug 视图中呈现，以便维护我的模板。
这是否澄清了我的问题？
也感谢您的链接。我会调查的

标签： javascript reactjs express pug create-react-app

【解决方案1】：

所以，你的 CRA 看起来像

  import React from 'react';
    import ReactDOM  from 'react-dom';

    ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('app')
    );

所以要公开这个组件，你应该有一个 pug 模板，它和你所有的其他模板一样，除了包含在它的某个地方

<div id="app"></div>
<script src="bundle.js"></script>

脚本的 src 是构建组件的相对路径。然后，当他们到达那条路线时，只需使用 express 提供该模板。

【讨论】：

这对我来说非常清楚。非常感谢你陪我度过难关。 ?
没问题。这最终导致其余组件在客户端上呈现，但反应运行时。一个有趣的练习是服务器端渲染它。为此，我会研究 Next.js，它是一个很好的反应 SSR 框架
过去几天我实际上已经在研究这个问题。我目前正在使用 Redux。管理服务器端是相当大的挑战。我还没有看过 next.js，但我肯定会。再次感谢你！