README

react-redux-universal-render

WARNING: This is first-draft technology. It does not yet include proper tests. Use at your own risk or help contribute.

A somewhat opinionated way to set up a React app. It uses:

react, duh.
redux for state.
react-redux to bridge the two.
react-helmet for <head> management.

And it provides a simple setup function for rendering a full page string from the server and then inflating it on the browser client.

Setup

Define how the output will be constructed from the view name and data. Export a module to be shared between the client and server bundles. The setup function takes two options: getView and createReduxStore.

import React from 'react'
import {createStore} from 'redux'
import setup from 'react-redux-universal-render'

// Define how view names will be mapped to React components
const VIEWS = {
  'home/index': (props) => <h1>{props.greeting}</h1>
}
function getView(name) {
  return VIEWS[name]
}

// Define your redux reducer.
function reducer(state, action) {
  return state
}

// Define how your redux store will be initialized from view data.
function createReduxStore(props) {
  // The simplest choice is to set the initial state of the store to the exact
  // props that were sent to the render function.
  return createStore(reducer, props)
}

// Create and export the render function to be used by both the client and server.
const createRenderer = setup({
  getView,
  createReduxStore,
})
export default createRenderer

react-helmet

Read the react-helmet docs for client-side usage. The renderer we just created will handle the server-side Helmet.rewind and <head> construction for you automatically.

Server Usage

Import your setup module. Initialize a render function with the server-side react-dom object. Call your render function with the view name and data. It will return an HTML string.

import ReactDOMServer from 'react-dom/server'
import createRenderer from './my-render-setup'

const render = createRenderer(ReactDOMServer)

const htmlString = render('home/index', {greeting: 'Hello, World!'})

Client Usage

Import your setup module. Initialize a render function with the client-side react-dom object. The render function does not use any arguments. It will reuse the view name and data from the server to inflate the react components. All you need to do is make sure the DOM is ready.

import ReactDOM from 'react-dom'
import createRenderer from './my-render-setup'

const render = createRenderer(ReactDOM)

window.addEventListener('DOMContentLoaded', render)

Recipes

Express

import http from 'http'
import express from 'express'
import ReactDOMServer from 'react-dom/server'
import createRenderer from './my-render-setup'

// Define middleware
const render = createRenderer(ReactDOMServer)
const renderMiddleware = function(req, res, next) {
  res.render = (...args) => res.send(render(...args))
  next()
}

// Create express app with middleware
const app = express()
app.use(renderMiddleware)
app.get('/', (req, res) => res.render('home/index', {greeting: 'Hello, World!'}))

// Start server
http.createServer(app).listen(process.env.PORT || 3000)

Usage no npm install needed!