# react-cohere

> The solution to server side and static rendering React applications.

Latest version **0.0.51** (published 2018-02-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-cohere
pnpm add react-cohere
yarn add react-cohere
bun add react-cohere
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.51 |
| Published | 2018-02-03 |
| First published | 2018-01-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Owen Ayres |
| Maintainers | owen.a |
| Keywords | react, react, server, render, react, server-side, rendering |

## Links

- npm: https://www.npmjs.com/package/react-cohere
- npm.io page: https://npm.io/package/react-cohere

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.51 (latest) — 2018-02-03
- 0.0.50 — 2018-02-03
- 0.0.49 — 2018-02-03
- 0.0.48 — 2018-02-03
- 0.0.47 — 2018-02-02
- 0.0.46 — 2018-02-02
- 0.0.45 — 2018-02-02
- 0.0.44 — 2018-02-02
- 0.0.43 — 2018-02-02
- 0.0.42 — 2018-02-02
- 0.0.41 — 2018-02-02
- 0.0.40 — 2018-02-02
- 0.0.39 — 2018-02-02
- 0.0.38 — 2018-02-01
- 0.0.37 — 2018-02-01
- … 35 more at https://npm.io/package/react-cohere/versions

## README

# react-ssr

<p align="center">
  <a href="https://travis-ci.org/oayres/react-ssr">
    <img src="https://api.travis-ci.org/oayres/react-ssr.svg?branch=master"
         alt="build status">
  </a>
  <a href="https://www.npmjs.com/package/react-ssr">
    <img src="https://img.shields.io/npm/v/react-ssr.svg"
         alt="npm version">
  </a>
  <a href="https://github.com/oayres/react-ssr/blob/master/LICENSE.md">
    <img src="https://img.shields.io/npm/l/react-ssr.svg"
         alt="license">
  </a>
  <a href="https://david-dm.org/oayres/react-ssr">
    <img src="https://david-dm.org/oayres/react-ssr/status.svg"
         alt="dependency status">
  </a>
  <a href="https://codecov.io/github/oayres/react-ssr?branch=master">
    <img src="https://codecov.io/gh/oayres/react-ssr/branch/master/graph/badge.svg" alt="Coverage via Codecov" />
  </a>
  <br><br>
  <b>Note that `react-ssr` has not made it to a production-ready state yet. It's nearly there!</b>
</p>

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

## License

[MIT](https://github.com/oayres/react-cohere/blob/master/LICENSE.md)

---
_Source: https://npm.io/package/react-cohere · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._