react-cohere

Note that Cohere is not quite ready for production yet.
Feel free to use it and open issues. It is actively under development.

Overview

Cohere, sometimes referred to as react-cohere, is an all-in-one solution to achieve server-side and static rendering of React applications in just a few lines of code. Using its own basic set of principles, Cohere aims to help make your routes coherent, meaning each route is a defined entity. Implementing these principles is what makes your app rapid to render, everywhere.

Installation

$ npm install react-cohere --save

Usage

Cohere has several different points of concern. Out of the box, it will server side render (SSR) routes of your app, but it may not do so asychronously without following our coherent principles. Basic usage will show you how to enable SSR synchronously. Advanced usage will provide an asynchronous example with API calls on the server.

Basic usage

The below example shows you a simple express server with an array of static routes that references two pages - both of which are React components returning some simple JSX.

• Your Node JS express server server.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

import HomePage from './HomePage'
import NotFoundPage from './NotFoundPage'

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

export default routes

🏆 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.

Advanced usage

So, you've got the app server-side rendering, but you need it to make data calls on the server, huh? We've got you covered. Let's assume you have dynamic data calls (calling an API) that determine the rendering of certain components. For example, you might not be able to render out a table of locations until you have called a Google Maps API and have the JSON available to your app. In these circumstances, Cohere will not server-side render your app out of the box correctly. Cohere provides a fluent api to extend your React components with for handling such scenarios.

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
  }
}

Contributing

Feel free to open any issues for desired features or bugs. Pull requests are certainly welcome. This package is still in its infancy.

License

MIT