react-ssr
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
$ 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
const app = const renderer = app // send all routes to Cohere
- Static routes of your React app
routes.js
const routes = path: '/' exact: true component: HomePage path: '/about' redirect: '/' path: '**' component: NotFoundPage
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:
Component static { const pageContent = { } return content: pageContent // becomes available as this.props.content } { console return <span /> }
🏆 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.