我当前的设计是让客户端使用浏览器连接到我的(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 API网关或从其获取数据的父微服务进行通信吗?
注意事项
设计决策
工具:
如何使用Java和ReactJS在Web API网关上聚合多个微服务ui组件,然后将此预渲染的HTML数据与JavaScript应用程序一起提供给客户端?
有用的参考资料:
问题
如何在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模板,然后将其返回给客户端。
Props
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在Mustache模板周围执行了许多魔术操作,因此所需要做的只是创建一个index.mustache文件,并在构造IndexView类时引用此文件。将其返回View给客户端告诉Dropwizard渲染视图并返回HTML。
index.mustache
IndexView
View
索引胡子
<!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组件的支持不可用而导致HTML不同而导致的问题,当页面加载以请求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可以分别更新其组件,并且还可以利用服务器端渲染。