1. 首页
  2. 问题
  3. 具有Java和ReactJS服务器端渲染的微服务UI前端
小编典典

具有Java和ReactJS服务器端渲染的微服务UI前端

reactjs

我当前的设计是让客户端使用浏览器连接到我的（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网关或从其获取数据的父微服务进行通信吗？

注意事项

  • 使UI组件与Web API网关对话似乎是合理的，但是会将微服务耦合到网关，这意味着在微服务上公开新的API网关也将需要更新。
  • 使UI组件直接与其微服务通信以获取数据，从而无需更新Web API网关，从而使它们之间的耦合性降低。但这然后将微服务暴露给来自客户端浏览器的外部调用。

设计决策

  • 将API网关中的UI组件创建会创建UI整体，而不是让每个微服务负责其自己的UI组件。使用整体方法简化了解决方案，并且避免了当客户端请求特定视图时必须聚合每个微服务UI组件的复杂性。

工具：

  • 爪哇
  • 纳斯霍恩
  • Dropwizard
  • ReactJS
  • 摇篮
  • Webpack
  • 节点JS
  • NPM

如何使用Java和ReactJS在Web
API网关上聚合多个微服务ui组件，然后将此预渲染的HTML数据与JavaScript应用程序一起提供给客户端？

有用的参考资料：


阅读 369

收藏
2020-07-22

共1个答案

小编典典

问题

如何在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可以分别更新其组件，并且还可以利用服务器端渲染。

2020-07-22