reactssr

README

reactssr

A library 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, wwith 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.

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.