easy-team / Egg View React Ssr
Licence: mit
Egg React Server Side Render (SSR) Plugin
Stars: ✭ 55
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Egg View React Ssr
Egg 24time
A Twitter-like news and social server for Egg. 微信小程序社区全栈解决方案
Stars: ✭ 493 (+796.36%)
Mutual labels: egg, egg-plugin
egg-view-vue-ssr
Egg Vue Server Side Render (SSR) Plugin
Stars: ✭ 90 (+63.64%)
Mutual labels: egg, egg-plugin
egg-parameters
Merge all parameters (ctx.params, ctx.request.query, ctx.request.body) into ctx.params like Rails application.
Stars: ✭ 24 (-56.36%)
Mutual labels: egg, egg-plugin
Egg React Webpack Boilerplate
Egg React Server Side Render(SSR) / Client Sider Render(CSR)
Stars: ✭ 634 (+1052.73%)
Mutual labels: webpack, egg
egg-y-validator
☯️ Egg Magic Validator (Egg 魔法验证工具)
Stars: ✭ 30 (-45.45%)
Mutual labels: egg, egg-plugin
Egg Cancan
cancancan like authorization plugin for Egg.js
Stars: ✭ 47 (-14.55%)
Mutual labels: egg, egg-plugin
Egg Restfulapi
🏅 基于Egg.js 2.0 & {mongoose,jwt}RESTful API 模板,用于快速集成开发RESTful前后端分离的服务端。
Stars: ✭ 524 (+852.73%)
Mutual labels: egg, egg-plugin
egg-view-react-ssr
React server side render solution for egg
Install
$ npm i egg-view-react-ssr --save
Usage
// {app_root}/config/plugin.js
exports.reactssr = {
enable: true,
package: 'egg-view-react-ssr',
};
Version
3.x.x (Node>8)
- node version > 8
- config
reactssr.layout
defaultapp/view/layout.html
- support react stateless component render (not support promise function callback)
2.x.x (Node>6)
- node version > 6
- config
reactssr.layout
defaultapp/view/layout.js
- support promise function callback(not support react stateless component render)
1.x.x
egg-view-react-ssr depends on egg-view-react plugin
Configuration
// {app_root}/config/config.default.js
exports.reactssr = {
// doctype: '<!doctype html>',
// layout: path.join(app.baseDir, 'app/view/layout.html'),
// manifest: path.join(app.baseDir, 'config/manifest.json'),
// injectHeadRegex: /(<\/head>)/i,
// injectBodyRegex: /(<\/body>)/i,
// injectCss: true,
// injectJs: true,
// crossorigin: false,
// injectRes: [],
// mergeLocals: true,
// fallbackToClient: true, // fallback to client rendering if server render failed
// afterRender: (html, context) => { /* eslint no-unused-vars:off */
// return html;
// },
};
see config/config.default.js for more detail.
Render
render
Server Render, Call when server render bundle error, will try client render**
// controller/home.js
module.exports = app => {
return class IndecController extends app.Controller {
async index(ctx) {
// home.js: webpack builded ssr entry jsbundle file
await ctx.render('home.js', { message: 'egg react server side render'});
}
};
};
renderClient
, Use React render layout
Client Render, Call when client render, render layout
exports.reactssr.layout
by React
// controller/home.js
module.exports = app => {
return class IndecController extends app.Controller {
async index(ctx) {
// home.js: webpack builded client render entry jsbundle file
await ctx.renderClient('home.js', { message: 'egg react client side render'});
}
};
};
renderAsset
, Use render layout by viewEngine, default nunjucks
Asset Render, Call - when asset render, you can render layout
exports.reactssr.layout
by viewEngine, default useegg-view-nunjucks
- you must install the specified engine dependence, such as
egg-view-nunjucks
oregg-view-ejs
- The context provides an
asset
object that can getjs
,css
,state
information. layout template
use default viewEngine nunjucks
// controller/home.js
module.exports = app => {
return class IndecController extends app.Controller {
async index(ctx) {
// home.js: webpack builded client render entry jsbundle file
await ctx.renderAsset('home.js', { message: 'egg react client asset render'});
}
};
};
scope render viewEngine config
// controller/home.js
module.exports = app => {
return class IndecController extends app.Controller {
async index(ctx) {
// home.js: webpack builded client render entry jsbundle file
await ctx.renderAsset('home.js', { message: 'egg react client asset render'}, { viewEngine: 'ejs' });
}
};
};
Example
-
React Server Side Render egg-react-webpack-boilerplate
-
React TypeScript Server Side Render egg-react-typescript-boilerplate
-
React SSR Framework Example for Egg res-awesome
Questions & Suggestions
Please open an issue here.
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].