react-ssr

alt="build status">


alt="npm version">


alt="license">


alt="dependency status">







Note that react-ssr has not made it to a production-ready state yet. It's nearly there!

Overview

react-ssr is a minimalistic solution to achieve server-side rendering with a few lines of code and a simple ruleset. The simple ruleset is outlined with performance in mind, and must be followed to server side render React apps effectively.

Installation

``sh
$ npm install react-ssr --save
$ npm install babel-plugin-react-ssr --save-dev
`

Adding to your server

Firstly, you'll need to use the module on your Node server and have some static routes of your app setup. The below example uses express:

- Your Node JS express server
server.js
`js
import express from 'express'
import cohere from 'react-cohere'
import routes from './routes'

const app = express()
const renderer = cohere({ routes })

app.get('*', renderer) // send all routes to Cohere
`

- Static routes of your React app
routes.js
`js
import HomePage from './HomePage'
import NotFoundPage from './NotFoundPage'

const routes = [
{
path: '/',
exact: true,
component: HomePage
},
{
path: '/about',
redirect: '/'
},
{
path: '**',
component: NotFoundPage
}
]

export default routes
`

Fetching data

There's one important rule: If you want to make a data call, and you'd like it to be server side rendered correctly, you'll need to use a special method for this. It's a static method that sits in your React component called fetchData. react-ssr will execute this before it begins rendering your app on the server and inject the result of it into the components props.

Here's an example:

`js
class Navigation extends React.Component {
static fetchData () {
const pageContent = new Promise((resolve, reject) => {
fetch('/api')
.then(res => res.json())
.then(resolve)
.catch(reject)
})

return {
content: pageContent // becomes available as this.props.content
}
}

render () {
console.log()
return
}
``

🏆 You should now have server-side rendering setup. There's still a few extra things to think about to make this work for more advanced applications. Continue reading to find out more.

License

MIT