reactssr

README

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.

Documentation

Overview

Package reactssr provides Server Side Rendering capabilties for React applications.

Example (NewServerSideRenderer)

package main

import (
	"fmt"
	"regexp"

	"github.com/tmc/reactssr"
)

func main() {
	r, err := reactssr.NewServerSideRenderer("./testdata/test-app-1/build/out.js")
	if err != nil {
		panic(err)
	}
	output, err := r.Render()
	if err != nil {
		panic(err)
	}
	untilFirstImage := regexp.MustCompile(`^(.*)<img`).FindAllString(output, -1)
	fmt.Println(untilFirstImage[0])
	// This is the expected output from a vanilla create-react-app app:
	

Index

• type Renderer
  • func NewServerSideRenderer(path string) (*Renderer, error)
  • func (r *Renderer) Render() (string, error)

Examples

• Package (NewServerSideRenderer)

Types

type Renderer

type Renderer struct {
	Path string
	// contains filtered or unexported fields
}

Renderer renders a React application to HTML.

func NewServerSideRenderer

func NewServerSideRenderer(path string) (*Renderer, error)

NewServerSideRenderer creates a new server side renderer from a JavaScript bundle file.

func (*Renderer) Render

func (r *Renderer) Render() (string, error)

Render renders the provided path to HTML.