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 exaple, 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.
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.
