Combine React App & Server

[kmcginnes]

Today, Graph Explorer is built with two distinct runtime environments that are mashed together in non-obvious ways.

• React App - A single page app that is client side only
• Proxy Server - An Express.js Node app that is server side only

The React app can function without the proxy server, but you must host the React app somewhere, and you lose features without the proxy server.

A better approach would be to have the React app hosted by the same server that provides the proxy server functionality. This will allow for tighter integration between the client and server.

Benefits

• Simplified deployment in Docker and development
• Potentially support Lambda deployments
• Simplified configuration
• Simplified connections
• Less complexity in the client code

In the React world, we have a few options for doing this well.

• Next.js - A juggernaut and what most of the industry uses.
• Remix.js - A simple, standards based approach.
• Waku - A very minimal approach.

Suggested Framework

I've used both Next.js and Remix.js before. I know both would be good choices. I am leaning toward Next.js for a few reasons:

• Community contributions will have less friction since many in the industry are familiar with Next.js
• Next.js supports more features from the latest versions of React
• Parallel routes might be useful for the sidebar in Graph Explorer

Suggested Approach

When implementing, I suggest we follow an incremental approach.

• Follow the Migrate from Vite guide to get Next.js working
• Move all proxy server functionality to Next.js route handlers
• Cleanup & update all configuration related to proxy server

Once these tasks are complete, Graph Explorer is on Next.js. It can be released at any point.

We can start taking advantage of RSC for other parts of the app. For example,

• Move request to query translation and response mapping to server
• Sidebar views can be server components that load their data using async
• Data Explorer can be almost entirely server components
• Search can be a server component

Potential Pitfalls

Local Storage State

All of the app's storage is hosted in the browser's local storage. This means that the server does not have access to that data.

Two approaches to working around this come to mind:

• Move some of the data to server
• Combine server data with local data in client components

Both approaches come with pros & cons.

Breaking Embedability

This will be a breaking change for anyone embedding Graph Explorer inside another web app. I'm not sure how many people are doing this, but I believe it is a non-zero number.

• [Feature request] Embeddability of components into custom applications #65