Render isomorphic React apps and components in Node.
An example implementation of the companion package @sequencemedia/react-router-redux-render
can be found in react-router-pagination-io.
In Express:
const express = require('express')
const app = express()
const port = 3000
const {
renderToString
} = require('react-render')
const App = require('./path/to/react/app')
app.get('/', (req, res) => res.send(renderToString(App)))
app.listen(port, () => console.log(`Express ${port}`))
If renderToString
encounters an error then it throws a 500 Internal Server Error
. Otherwise, it returns a string.
You can supply App
with props
using the second argument:
renderToString(App, {})
(Since this is not a Redux app you are likely to use props
.)
react-render
exports three functions:
renderToString
renderToStaticMarkup
render
renderToString
generates <html />
including the attributes that React uses in ReactDOM.hydrate()
. It implements ReactDOMServer.renderToString()
.
renderToStaticMarkup
doesn't include those attributes. It's useful for using React as a rendering engine for static pages. It implements ReactDOMServer.renderToStaticMarkup()
.
render
executes renderToString
but returns a Promise
which resolves to a string.
@sequencemedia/react-router-redux-render
for React Router apps (with Redux)@sequencemedia/react-router-render
for React Router apps (without Redux)@sequencemedia/react-redux-render
for React Redux apps (without React Router)