Microservices UI Frontend with Java and ReactJS Server Side Rendering

Question

My current design is to have clients connect to my (Java) Web API Gateway using a browser, the Web API Gateway will call each (Java) microservice to get their JSON data and return it to the UI component that made the request on the client.

The only client side rendering will be from each ReactJS UI component for recurring requests to the gateway.

On the server side the full HTML view will be rendered prior to being sent back to the client.

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)

This is where it gets unclear, would it be best to have each UI component communicate with the Web API Gateway or the parent Microservice it came from to get data?

Considerations

• Having the UI components talk to the Web API Gateway seems reasonable but will couple the microservices to the gateway, meaning to expose a new API on the microservice the gateway will also need to be updated.
• Having the UI components talk directly to its Microservice for data removes the need to also update the Web API Gateway, keeping them less coupled. But this then exposes the Microservice to external calls from the client browser.

Design Decisions

• Having the UI components within the API gateways creates a UI monolith as opposed to having each microservice responsible for its own UI component. Using the monolithic approach simplifies the solution and also avoids the complexities of having to aggregate each microservices UI component when the client requests a particular view.

Tools:

• Java
• Nashorn
• Dropwizard
• ReactJS
• Gradle
• Webpack
• NodeJS
• NPM

How do I aggregate multiple microservice ui components on the Web API Gateway using Java and ReactJS then serve this pre-rendered HTML data along with the JavaScript application to the client?

Helpful References:

• Server side rendering with Java 8 and Nashhorn http://winterbe.com/posts/2015/02/16/isomorphic-react-webapps-on-the-jvm/

Answer 1

So, a React component needs two things: the JavaScript source code and the data.

The JavaScript source code can be provided by a CDN.

The data must be provided by the Microservices.

If you don't want server side rendering, then the skeleton index.html file along with the JS files are provided by a CDN.

If you need server side rendering (for SEO purposes, for example) then the API gateway (or another Web server) will render the components using NodeJS by requesting their source code from the CDN and their data from the microservices then return the full HTML to the browser.

On the client side, React will continue to load other data from the right microservice as JSON using the API gateway.