https://github.com/bingdian/egg-view-react-loadable
React loadable SSR view plugin for egg
https://github.com/bingdian/egg-view-react-loadable
egg egg-plugin egg-react-ssr egg-view
Last synced: 11 months ago
JSON representation
React loadable SSR view plugin for egg
- Host: GitHub
- URL: https://github.com/bingdian/egg-view-react-loadable
- Owner: bingdian
- License: mit
- Created: 2020-01-30T06:19:04.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-06-02T11:22:38.000Z (about 3 years ago)
- Last Synced: 2025-07-13T21:44:26.126Z (11 months ago)
- Topics: egg, egg-plugin, egg-react-ssr, egg-view
- Language: JavaScript
- Homepage:
- Size: 496 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# egg-view-react-loadable
[![NPM version][npm-image]][npm-url]
[![Continuous Integration][ci-image]][ci-url]
[![Test coverage][codecov-image]][codecov-url]
[![Known Vulnerabilities][snyk-image]][snyk-url]
[![npm download][download-image]][download-url]
[npm-image]: https://img.shields.io/npm/v/egg-view-react-loadable.svg?style=flat-square
[npm-url]: https://npmjs.org/package/egg-view-react-loadable
[ci-image]: https://github.com/bingdian/egg-view-react-loadable/workflows/CI/badge.svg?branch=master&event=push
[ci-url]: https://github.com/bingdian/egg-view-react-loadable/actions?query=branch%3Amaster
[codecov-image]: https://img.shields.io/codecov/c/github/bingdian/egg-view-react-loadable.svg?style=flat-square
[codecov-url]: https://codecov.io/github/bingdian/egg-view-react-loadable?branch=master
[snyk-image]: https://snyk.io/test/npm/egg-view-react-loadable/badge.svg?style=flat-square†
[snyk-url]: https://snyk.io/test/npm/egg-view-react-loadable
[download-image]: https://img.shields.io/npm/dm/egg-view-react-loadable.svg?style=flat-square
[download-url]: https://npmjs.org/package/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/](https://loadable-components.com/) for more detail.
## Example
[egg-react-ssr-app-example](https://github.com/bingdian/egg-react-ssr-app-example)
## Install
```bash
$ npm i egg-view-react-loadable --save
$ npm i egg-view-nunjucks --save
```
## Usage
```js
// {app_root}/config/plugin.js
exports.nunjucks = {
enable: true,
package: 'egg-view-nunjucks',
};
exports.reactLoadable = {
enable: true,
package: 'egg-view-react-loadable',
};
```
## Configuration
```js
// {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](config/config.default.js) for more detail.
## Template
### template for `ctx.renderSSR`
```html
{{title}}
${styleTags}
${content}
${initStateContent}
${scriptTags}
```
```html
${initStateContent}
${scriptTags}