问题
如何在 Web API 网关上的服务器端渲染期间聚合 ReactJS UI 组件。
解决方案
使用像Mustache这样的模板框架来注入每个 ReactJS 组件服务器端呈现的 HTML 输出，然后将此 HTML 返回给客户端。
Github 存储库https://github.com/damorton/dropwizardheroku-webgateway
服务器端
我在 Web API 网关上实现的解决方案首先从微服务请求 JSON 数据，然后渲染 ReactJS 组件，同时将来自微服务的 JSON 数据作为Props. 一旦我将完全呈现的 ReactJS 组件和数据作为 HTML 字符串，我使用 Mustache 模板将完全呈现的 ReactJS 组件 HTML 注入到 Mustache 模板中，然后将其返回给客户端。
网关资源.java
@GET
@Produces(MediaType.TEXT_HTML)
public IndexView index() throws IOException {
// Get events json data from Events microservice
ApiResponse events = getEventsJsonData();
// Render the Events component and pass in props
@SuppressWarnings("unchecked")
List<Object> eventsProps = (List<Object>) events.getList();
String eventsComponent = this.nashornController.renderReactJsComponent(kEventsUiComponentRenderServerFunction, eventsProps);
IndexView index = new IndexView(eventsComponent);
return index;
}
注意： Dropwizard 在 Mustache 模板周围执行了很多魔法，因此所有需要的是创建一个index.mustache文件并在构造IndexView类时引用它。将此返回View给客户端告诉 Dropwizard 呈现视图并返回 HTML。
index.mustache
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Dropwizard Heroku Event Service</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom-server.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>
</head>
<body>
<h1>Events</h1>
<div id="events">{{{eventsComponent}}}</div>
<script type="text/javascript" src="assets/js/bundle.js"></script>
<script type="text/javascript" src="assets/js/client.js"></script>
</body>
</html>
客户端
在客户端，为了解决由于 ReactJS 组件的 props 在最初安装组件时不可用而导致客户端和服务器端呈现的 HTML 不同的问题，在页面加载时调用一个 javascript 函数来请求 JSON来自网关的数据。
客户端.js
var loadEventsFromServer = function(eventsUrl) {
axios.get(eventsUrl).then(function(res) {
var data = res.data.list;
renderClientEvents(data);
});
};
loadEventsFromServer('https://domain.webapigateway.com/events');
ReactJS
当组件被挂载时，客户端 HTML 不会被重新渲染，React 知道来自服务器端渲染的已经存在的 HTML，并且只在它挂载时为每个组件添加事件侦听器。这允许 React 单独更新其组件，并利用服务器端渲染。