Skip to content

easy-team/egg-view-react-ssr

Repository files navigation

egg-view-react-ssr

NPM version build status Test coverage David deps Known Vulnerabilities npm download

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 default app/view/layout.html
  • support react stateless component render (not support promise function callback)

2.x.x (Node>6)

  • node version > 6
  • config reactssr.layout default app/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

Server Render, Call render

when server render bundle error, will try client render**

https://www.yuque.com/easy-team/egg-react/node

// 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'});
    }
  };
};

Client Render, Call renderClient, Use React render layout

https://www.yuque.com/easy-team/egg-react/web

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'});
    }
  };
};

Asset Render, Call renderAsset, Use render layout by viewEngine, default nunjucks

https://www.yuque.com/easy-team/egg-react/asset

  • when asset render, you can render layout exports.reactssr.layout by viewEngine, default use egg-view-nunjucks
  • you must install the specified engine dependence, such as egg-view-nunjucks or egg-view-ejs
  • The context provides an asset object that can get js, 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

Questions & Suggestions

Please open an issue here.

License

MIT