问题
如何在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模板，然后将其返回给客户端。
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。
索引胡子
<!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可以分别更新其组件，并且还可以利用服务器端渲染。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）