A Go package to perform Server Side Rendering of React apps.
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
In this example:
reactssr.render(Server.renderToString( <React.StrictMode> <App /> </React.StrictMode> ));
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.