使用Java和ReactJS服务器端呈现的微服务UI前端
我目前的设计是让客户端使用浏览器连接到我的(Java) Web API网关，Web API网关将调用每个(Java)微服务来获取他们的JSON数据，并将其返回给在客户机上发出请求的UI组件。
唯一的客户端呈现将来自每个ReactJS UI组件，用于向网关重复请求。
在服务器端，完整的HTML视图将在发送回客户端之前呈现。
Client browser
▼ (Request Dashboard View)
Web API Gateway
▼ (Request microservice JSON data)
Microservice A JSON Data
Microservice B JSON Data
Microservice C JSON Data
Microservice D JSON Data
▼ (Return JSON Data to gateway)
Web API Gateway
▼ (Render HTML and return to Client)
Client browser
▼ (ReactJS UI Components request data from API Gateway)这就是它变得不清楚的地方，是否最好让每个UI组件与Web网关或它来自于获取数据的父微服务进行通信？
注意事项
- 让UI组件与Web网关对话似乎是合理的，但是将微服务耦合到网关，这意味着要在微服务上公开一个新的API --网关也需要更新。
- 让UI组件直接与其Microservice进行数据对话，就不需要更新Web，从而减少了它们之间的耦合。但是，这会将Microservice公开给来自客户端浏览器的外部调用。
设计决策
- 在API网关中拥有UI组件会创建一个UI monolith，而不是让每个微服务负责它自己的UI组件。使用单块方法简化了解决方案，并避免了当客户端请求特定视图时必须聚合每个微服务UI组件的复杂性。
工具：
- Java
- 纳什恩
- Dropwizard
- ReactJS
- Gradle
- Webpack
- NodeJS
- NPM
如何使用Java和ReactJS在Web网关上聚合多个微服务ui组件，然后将这些预呈现的JavaScript数据连同JavaScript应用程序一起提供给客户机？
有用的参考资料：
- 用Java 8和纳什霍恩http://winterbe.com/posts/2015/02/16/isomorphic-react-webapps-on-the-jvm/进行服务器端呈现
回答 2
Stack Overflow用户
发布于 2017-05-08 11:27:01
问题
如何在Web网关的服务器端呈现过程中聚合ReactJS UI组件。
溶液
使用模板框架(如八字胡 )注入每个ReactJS组件服务器端的呈现的ReactJS输出，然后将此HTML提供给客户端。
Github回购https://github.com/damorton/dropwizardheroku-webgateway
服务器端
我在Web网关上实现的解决方案首先从微服务请求JSON数据，然后提供ReactJS组件，同时将来自微服务的JSON数据注入为Props。当我将数据完全呈现的ReactJS组件作为templating时，我就使用穆斯塔赫模板将完全呈现的ReactJS组件HTML注入到ReactJS模板中，然后将其返回给客户机。
WebGatewayResource.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执行了大量的围绕胡子模板的魔术，所以所需要的就是创建一个index.mustache文件，并在构造IndexView类时引用它。将此View返回给客户端，告诉Dropwizard呈现视图并返回。
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>客户端
在客户端，为了解决客户端和服务器端呈现的HTML不同的问题，因为最初挂载组件时ReactJS组件不可用的支持，在页面加载从网关请求JSON数据时调用一个javascript函数。
client.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单独更新其组件，还可以利用服务器端呈现。
Stack Overflow用户
发布于 2017-04-13 17:49:42
因此，React component需要两样东西：JavaScript源代码和数据。
JavaScript源代码可以由CDN提供。
这些数据必须由微观服务机构提供。
如果您不希望服务器端呈现，那么框架index.html文件和JS文件将由CDN提供。
如果您需要服务器端呈现(例如，出于SEO目的)，则API网关(或另一个Web服务器)将通过从CDN请求组件源代码和从微服务请求它们的数据来呈现组件，然后将完整的HTML返回到浏览器。
在客户端，React将继续使用JSON从正确的微服务加载其他数据。
https://stackoverflow.com/questions/43396744
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号