# react-express-ssr

> server side rendering with expressjs

Latest version **1.0.4** (published 2017-03-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-express-ssr
pnpm add react-express-ssr
yarn add react-express-ssr
bun add react-express-ssr
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2017-03-10 |
| First published | 2017-03-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 0.8.0 |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | TJ Holowaychuk |
| Maintainers | vishal.bajpai |
| Keywords | rrs, server side rendering, expressjs, react, reactjs, node, nodejs |

## Links

- npm: https://www.npmjs.com/package/react-express-ssr
- Repository: https://github.com/vishalbajpaidev/react-express-ssr
- Issues: https://github.com/vishalbajpaidev/react-express-ssr/issues
- npm.io page: https://npm.io/package/react-express-ssr

## Dependencies (3)

- [react](https://npm.io/package/react.md) 15.0.2
- [react-redux](https://npm.io/package/react-redux.md) 4.4.5
- [react-router](https://npm.io/package/react-router.md) 2.4.0

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

- 1.0.4 (latest) — 2017-03-10
- 1.0.3 — 2017-03-09
- 1.0.2 — 2017-03-09
- 0.0.1 — 2017-03-09
- 1.0.1 — 2017-03-09
- 1.0.0 — 2017-03-09
- 1.4.3 — 2017-03-09

## README

# react-express-ssr

[![NPM Version][npm-image]][npm-url]
[![NPM Downloads][downloads-image]][downloads-url]
[![Node.js Version][node-version-image]][node-version-url]
[![Build Status][travis-image]][travis-url]
[![Test Coverage][coveralls-image]][coveralls-url]

You may reander HTML from `sever` by setup very less configuration and you may set list of action that you want to initially dispatch for setup your store before render HTML.

## Installation

```sh
$ npm install react-express-ssr
```

## API

```js
var express      = require('express')
var ssr = require('react-express-ssr')

var app = express()
app.get('*', (req, res, next) => {
    ssr(config,(err,html)=>{
        if(err) console.log(err);
        res.send(html);
  });
});

```

### ssr(config, callback)

- `config` a object of configuration that must have following keys:
    - `routes` a react route what you would like to render from server.
    eg: <Route path='/'  component={App}>......</Router>
    - `template` a compiled template may be in jade or ejs
    eg: 
        - For `jade template`
            jade.compile(require('./view/index.jade.js'))
        - For `ejs template`
            ejs.compile(require('./view/index.ejs.js'))
    - `store` must be your store with initial values of store state,that will be update after server side rendering.
     - `data` must be an object proive help to render dynamic data in your template.
     

### Need List

If you want to dispatch actions at the time of server side rendering, you need to define the list of action in an array known as "need".
- `Eg:`
 ```js
import { getMediaInfoAction } from './actions/getMediaInfoAction';
    class App extends Component {
        .........
    }
// All action of this list will be fire from server side rendering. just like App Component you may also use it for child Components as well
    App.need = [
        getMediaInfoAction,
    ];
```

## Example

```js
var express = require('express')
var ssr = require('react-express-ssr')
import routes from './routes';

var app = express()
app.get('*', (req, res, next) => {
const config = {
  routes: routes,
  template:  ejs.compile(require('./view/index.ejs.js')),
  url: req.url,
  store: configureStore(),
  data:{
    title: 'Home Page',
    apikey : '123xxxxxxx552',
  }
};
    ssr(config,(err,html)=>{
        if(err) console.log(err);
        res.send(html);
  });
});

```

## Template File :
- `Ejs Template File` should look like this.

```js
// Exporting ejs template as string for further compilation
// is a hack to work around webpack's serverside bundling
module.exports = `
<html>
<body>
<h1>Heading..</h1>
<%- body %>
</body>
`;

```
### [MIT Licensed](LICENSE)

[npm-image]: https://img.shields.io/npm/v/react-express-ssr.svg
[npm-url]: https://npmjs.org/package/react-express-ssr
[node-version-image]: https://img.shields.io/node/v/react-express-ssr.svg
[node-version-url]: https://nodejs.org/en/download
[travis-image]: https://img.shields.io/travis/expressjs/react-express-ssr/master.svg
[travis-url]: https://travis-ci.org/expressjs/react-express-ssr
[coveralls-image]: https://img.shields.io/coveralls/expressjs/react-express-ssr/master.svg
[coveralls-url]: https://coveralls.io/r/expressjs/react-express-ssr?branch=master
[downloads-image]: https://img.shields.io/npm/dm/react-express-ssr.svg
[downloads-url]: https://npmjs.org/package/react-express-ssr

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