egg-view-react-loadable
React loadable SSR view plugin for egg
Features
- Code splitting
- Server Side Rendering
- Full dynamic import
see https://loadable-components.com/ for more detail.
Example
Install
$ npm i egg-view-react-loadable --save
$ npm i egg-view-nunjucks --saveUsage
// {app_root}/config/plugin.js
exports.nunjucks = {
enable: true,
package: 'egg-view-nunjucks',
};
exports.reactLoadable = {
enable: true,
package: 'egg-view-react-loadable',
};Configuration
// {app_root}/config/config.default.js
exports.view = {
root: [
path.join(app.baseDir, 'app/view'),
path.join(app.baseDir, 'app/public/ssr'),
].join(','),
mapping: {
'.html': 'nunjucks',
'.js': 'reactLoadable',
},
};
exports.reactLoadable = {
nodeStatsFile: path.join(app.baseDir, 'app/public/ssr/loadable-stats.json'),
webStatsFile: path.join(app.baseDir, 'app/public/csr/loadable-stats.json'),
template: {
// template config for `ctx.renderSSR`
renderSSR: {
renderSSRTemplate: path.join(app.baseDir, 'app/view/renderSSRLayout.html'),
viewEngine: 'nunjucks',
},
// template config for `ctx.renderToStream`
renderToStream: {
renderToStreamStartTemplate: path.join(app.baseDir, 'app/view/renderToStreamStartTemplate.html'),
renderToStreamEndTemplate: path.join(app.baseDir, 'app/view/renderToStreamEndTemplate.html'),
viewEngine: 'nunjucks',
},
},
};see config/config.default.js for more detail.
Template
template for ctx.renderSSR
<!-- {app_root}/app/view/renderSSRLayout.html -->
<!doctype html>
<head>
<meta charSet="utf-8"/>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
<title>{{title}}</title>
${styleTags}
</head>
<body>
<div id="app">${content}</div>
${initStateContent}
${scriptTags}
</body>
</html>template for ctx.renderToStream
<!-- {app_root}/app/view/renderToStreamStartTemplate.html -->
<!doctype html>
<head>
<meta charSet="utf-8"/>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
<title>{{title}}</title>
</head>
<body>
<div id="app"><!-- {app_root}/app/view/renderToStreamEndTemplate.html -->
</div>
${initStateContent}
${scriptTags}
</body>
</html>Render
ctx.renderSSR
// controller/home.js
module.exports = app => {
return class HomeController extends app.Controller {
async index() {
const { ctx } = this;
const { url, path } = ctx;
await ctx.renderSSR({
url,
path,
});
}
};
};ctx.renderToStream
// controller/home.js
module.exports = app => {
return class HomeController extends app.Controller {
async index() {
const { ctx } = this;
const { url, path } = ctx;
await ctx.renderToStream({
url,
path,
});
}
};
};Questions & Suggestions
Please open an issue here.