A Koa view engine which renders React components on server.
$ npm install koa-react-view
var react = require('koa-react-view');
var path = require('path');
var koa = require('koa');
var app = koa();
var viewpath = path.join(__dirname, 'views');
var assetspath = path.join(__dirname, 'public');
react(app, {
views: viewpath,
babel: {
only: [
viewpath,
assetspath
]
}
});
app.use(function* () {
this.render(home, {foo: 'bar'});
});
option | values | default |
---|---|---|
doctype |
any string that can be used as a doctype, this will be prepended to your document | "<!DOCTYPE html>" |
beautify |
true : beautify markup before outputting (note, this can affect rendering due to additional whitespace) |
false |
views |
the root directory of view files | path.join(__dirname, 'views') |
extname |
the default view file's extname | jsx |
writeResp |
true : writes the body response automatically |
true |
babel |
the options for babel/register | {only: options.views} |
cache |
true : cache all the view files |
process.env.NODE_ENV === 'production' |
internals |
true : include React internals in output |
false |
React provides two ways to render components server-side:
-
ReactDOMServer.renderToStaticMarkup strips out all the React internals, reducing the size of the output. Best for static sites.
-
ReactDOMServer.renderToString maintains React internals, allowing for client-side React to process the rendered markup very speedily. Best for an initial server-side rendering of a client-side application.
By default, the ReactDOMServer.renderToStaticMarkup
method will be used. It is possible to use ReactDOMServer.renderToString
instead (and maintain the React internals) by setting the internals
option to true
, or by setting the third parameter of this.render
to true
on a case-by-case basis.
koa-react-view
support ctx.state in koa.
MIT