Egg-view-rax-ssr NPM

egg-view-rax-ssr

Rax Server Side Render Plugin for Egg

Install

$ npm i  egg-view-rax-ssr --save

Usage

// {app_root}/config/plugin.js
exports.raxssr = {
  enable: true,
  package: 'egg-view-rax-ssr',
};

Configuration

// {app_root}/config/config.default.js
exports.raxssr = {
  // 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
exports.index = function* (ctx) {
  yield ctx.render('index/index.js', { message: 'egg rax server side render'});
};

Client Render, Call `renderClient`, Use Rax render layout

https://www.yuque.com/easy-team/egg-react/web
when client render, render layout exports.raxssr.layout by Rax

// controller/home.js
exports.client = function* (ctx) {
  yield ctx.renderClient('index/index.js',{ message: 'egg rax client 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.raxssr.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
exports.asset = function* (ctx) {
  yield ctx.renderAsset('index/index.js', { message: 'egg rax asset render'});
};

scope render viewEngine config

// controller/home.js
exports.asset = function* (ctx) {
  yield ctx.renderAsset('index/index.js', { message: 'egg rax asset render'}, { viewEngine: 'ejs' });
};