egg-view-nrssr
依赖说明
依赖的 egg 版本
egg-view-nrssr 版本 | egg 1.x |
---|---|
1.x | 😁 |
0.x | ❌ |
开启插件
// config/plugin.jsexportsnrssr = enable: true package: 'egg-view-nrssr';
使用场景
-
此插件主要用于使用
nunjucks
作为html
模板的react
同构应用。
它运用nunjucks
的自定义扩展能力,将服务端渲染的结果输出到html
中。 -
使用方法:
在
eggjs
框架中启用该模板插件// config/plugin.jsexportsnrssr =enable: truepackage: 'egg-view-nrssr';配置
egg-view-nrssr
// config/config.default.jsmodule {const config = {};confignrssr =customTagName: 'pagelet'hydrate: 'hydrate'manifestPath: path...otherConfig;configview =defaultViewEngine: 'nrssr'defaultExtension: '.html';return config;};在
controller
中渲染nunjucks
模板// app/controller/home.jsasync {const props = await ctxservicehome;const body = await ctx;}在
view
定义nunjucks
模板<!-- app/view/index.html -->My App{% pagelet 'home' %}controller
中的pageletProps
会传给egg-view-nrssr
,egg-view-nrssr
解析app/view/index.html
模板,
解析到{% pagelet 'home' %}
时,renderToString
会寻找home
组件,将pageletProps['home']
作为props
渲染home
组件得到html
替换{% pagelet 'home' %}
得到最终的html
。
详细配置
/** * @property * @property * 因为react-loadable懒加载应该用于前端路由变化时,在由服务端渲染页面时, * 应该先在服务端通过preloadAll方法提前加载所有bundle,直接渲染当前页面完整内容。 * 然后在客户端先由script标签提前加载所有bundle,接着通过preloadReady方法告知bundle已经提前加载, * 从而客户端混合时是和服务端一致的完整页面。 * 该方法接收一个参数modules,它是当前页面所有bundle名的数组。 * 当前页面所有bundle名要在服务端渲染页面时通过react-loadable提供的Capture高阶组件捕获。 * 具体参见react-loadable文档。 * @property * @property * 比如把react组件提前通过babel编译读入内存;提前执行react-loadable的preloadAll等,以减少服务端渲染的时长 * @property * @property {Function | AsyncFunction} renderToString - 服务端渲染方法。渲染pagelet。 * 接收的参数:pageletProps 该页面所有pagelet的属性 * name 当前pagelet的名称 * reactRouterContext react-router服务端渲染的context, * 用于Redirect在服务端渲染时的重定向等。 * 具体参见react-router Server Rendering文档 * loadableModules 收集当前页面react-loadable所有懒加载bundle名的数组 * ctx 当前请求的上下文,包含eggjs的ctx * basename react-router的basename * @property * @property * 本地开发时,manifest文件是从webpack虚拟文件系统读取,请使用的egg-webpack插件 * @property * @property */exportsnrssr = noCache: false // default false // default () => [], required only if react-loadable used basename: '' // default '', required only if react-router used beforeStart: async // no default, not required customTagName: 'pagelet' // no default, required renderToString: async pageletProps: pagelet: {} name: '' reactRouterContext: {} loadableModules: ctx: ctx: app basename: '' html // no default, required hydrate: 'hydrate' // no default, required manifestPath: '/path/to/app/public/mainfest.json' // no default, reqiured commonFiles: 'react' 'react-dom' // no default, not required html // no default, not required;
- 其中
noCache
是nunjunks
的配置,你还可以使用任何其他的nunjunks配置
注意事项
webpack
打包需要将React
组件文件和hydrate
文件导出为commonjs
模块。因为为了减少客户端全局变量,我们使用了唯一全局变量exports
。参考如下配置:
output: filename: '[name].js' libraryTarget: 'commonjs' library: '[name]' libraryExport: 'default'
提问交流
请到 egg-view-nrssr issues 异步交流。