Skip to main content

React and SSR

ZyveraWeb supports React applications in two modes:

1. Single Page Application (SPA)

Build your React app with Vite, Create React App, or any bundler, and place the output in public/.

Project structure:

plugins/ZyveraWeb/site/react-app/
├── public/
│   ├── index.html      ← React app entry
│   ├── assets/
│   │   └── index.js    ← Bundled React app
│   └── style.css
├── server.js           ← API backend (optional)
└── package.json

Configuration:

sites:
  - domain: "react.example.com"
    dir: "site/react-app"

The React app is served as static files from public/. If you include a server.js, it can serve as an API backend for your SPA.

Note: When React is loaded from a CDN (as in the react-demo example), the browser handles all rendering. This is the simplest approach.

2. Server-Side Rendering (SSR)

For SSR, you need the react and react-dom npm packages:

package.json:

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

server.js:

var React = require('react');
var ReactDOMServer = require('react-dom/server');

function handleRequest(request) {
    if (request.path === '/') {
        var html = ReactDOMServer.renderToString(
            React.createElement('div', null,
                React.createElement('h1', null, 'Hello from SSR!'),
                React.createElement('p', null, 'Rendered at: ' + new Date().toISOString())
            )
        );

        return {
            status: 200,
            headers: { 'Content-Type': 'text/html' },
            body: '<!DOCTYPE html><html><body>' + html + '</body></html>'
        };
    }
    return null;
}

SSR Notes

  • The react-dom/server module is available via CommonJS require(), just like in Node.js.
  • SSR in GraalJS works the same as in Node.js for most use cases.
  • For complex React apps, consider keeping the heavy rendering on the client (SPA) and using server.js for data APIs only.

Hybrid Approach (SPA + SSR)

You can combine both approaches:

  • Use public/ for your client-side React build (SPA).
  • Use server.js for API endpoints that the SPA calls.
  • Optionally add SSR for initial page load performance.

Available npm Packages for React

The following packages have been tested with GraalJS:

  • react ✓
  • react-dom ✓ (including react-dom/server)
  • react-router-dom (untested)
  • @emotion/react (untested)

For any package, YMMV. File an issue if you find incompatibilities.

No comments to display

Back to top