java - 带有 Java 和 ReactJS 服务器端渲染的微服务 UI 前端

Question

我目前的设计是让客户端使用浏览器连接到我的 (Java) Web API 网关，Web API 网关将调用每个 (Java) 微服务​​来获取它们的 JSON 数据并将其返回给发出请求的 UI 组件在客户端上。

唯一的客户端渲染将来自每个 ReactJS UI 组件，用于对网关的重复请求。

在服务器端，完整的 HTML View 将在发送回客户端之前呈现。

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 组件。使用单体方法简化了解决方案，还避免了在客户端请求特定 View 时必须聚合每个微服务 UI 组件的复杂性。

工具:

• Java
• 纳肖恩
• Dropwizard
• ReactJS
• Gradle
• 网页包
• 节点
• 新公共(public)管理

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

有用的引用:

• 使用 Java 8 和 Nashhorn 进行服务器端呈现 http://winterbe.com/posts/2015/02/16/isomorphic-react-webapps-on-the-jvm/

Answer 1

因此，React 组件 需要两样东西:JavaScript 源代码和数据。

JavaScript 源代码可以由 CDN 提供。

数据必须由微服务提供。

如果您不想在服务器端呈现，则框架 index.html 文件以及 JS 文件由 CDN 提供。

如果您需要服务器端呈现(例如出于 SEO 目的)，那么 API 网关(或另一个 Web 服务器)将通过从 CDN 请求它们的源代码和它们的使用 NodeJS 来呈现组件来自微服务的数据然后将完整的 HTML 返回给浏览器。

在客户端，React 将继续使用 API 网关 从正确的微服务加载其他数据作为 JSON。