reactssr

A Go package to perform Server Side Rendering of React apps.

Example usage

Given a bundle produced from an additional entrypoint to your application such as js/index.ssr.jsx:

import * as React from 'react';
import * as Server from 'react-dom/server'
import './index.css';
import App from './App';

const AppOutput = Server.renderToString(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// reactssr.render is the callback injected by the go runtime to pass the rendered application back.
reactssr.render(AppOutput);

This file should be bundled, for example, with esbuild as so:

npx esbuild \
   src/index.ssr.jsx \
   --inject:src/react-shim.js \
   --bundle \
   --sourcemap \
   --outfile=build/out.js \
   --loader:.js=jsx \
   --loader:.svg=text \
   --define:process.env.NODE_ENV=\"production\"

Then the following code will execute the bundle and load the results into a Go variable (for serving to a client, for emple).

r, _ := reactssr.NewServerSideRenderer("./testdata/test-app-1/build/out.js")
output, _ := r.Render()

// output contains the rendered html from the React application.

How this works

reactssr works by executing a React application bundle with reactssr.render injected into the global Javascript namespace.

In this example:

reactssr.render(Server.renderToString(
  <React.StrictMode>
    <App />
  </React.StrictMode>
));

reactssr.render is a Go callback which allows the Javascript execution environment to pass the rendered HTML and CSS between runtimes.

Performance

This package includes benchmarks which are run in CI: reactssr_test.go.

Recent performance results

go test -v -run=XXX -benchmem -bench=.*
goos: linux
goarch: amd64
pkg: github.com/tmc/reactssr
BenchmarkRender
BenchmarkRender-2    	     464	   5855720 ns/op	    3459 B/op	      19 allocs/op
PASS

This indicates that it takes just under 6 milliconds to render the current default output from create-react-app. This is without any specific work towards optimizing the implementation and this output is easily cachable.