1.0.4 • Published 8 years ago
react-express-ssr v1.0.4
react-express-ssr
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
$ npm install react-express-ssrAPI
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)
configa object of configuration that must have following keys:routesa react route what you would like to render from server. eg: ......templatea compiled template may be in jade or ejs eg: - Forjade templatejade.compile(require('./view/index.jade.js')) - Forejs templateejs.compile(require('./view/index.ejs.js'))storemust be your store with initial values of store state,that will be update after server side rendering.datamust 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: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 Fileshould look like this.
// 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>
`;