react-resolve-render

awaitable React renderToString for stateful Server Side Rendering

Homepage

About

Attempting to render a React application with asynchronously fetched state is non-trivial. One typical category of approaches leads to the need to render the application multiple times (e.g. hitting the route 2 or 3 times) in order to load the state cache. The react-resolve-render module is an awaitable function which keeps rendering until the output is consistent. This allows full state hydration on the first request.

Usage

import { createServer } from 'http'
import render from 'react-resolve-render'
import { createElement } from 'react'
import App from './App'

// these are the default options:
const renderOptions = { 
  tick: 75, 
  max: 10, 
  logger: console 
}

createServer(async (req, res) => {
  try {
    const str = await render(createElement(App), renderOptions)
    res.end(str)
  } catch (err) {
    console.error(err)
    res.statusCode = 500
    res.end('Server Error')
  }
}).listen(3000)

Install

npm install

Tests

npm test

Author

David Mark Clements

• Twitter: @davidmarkclem
• Github: @davidmarkclements

Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.

Show your support

Give a ️ if this project helped you!

License

Copyright 2020 David Mark Clements.
This project is MIT licensed.