2.0.0 • Published 4 years ago
mini-next-ssr v2.0.0
如何使用
npm -i mini-next -g
mini-next init yourprojectName
cd yourprojectName
npm install
npm start
基于koa
// app.js
import miniNext from 'mini-next';
import koa from 'koa';
const app = new koa();
new miniNext(app);
app.listen(8001);
cli 命令
mini-next dev [page] // 客户端启动
mini-next build [page] // 生成环境代码构建
mini-next output [page] // 静态资源导出 默认输出目录.mini-next
高级配置
// config/mini-next.config.js
module.exports = {
prefixCDN:'/',
prefixRouter: '', //页面路由前缀 默认/pagename 添加后前缀后访问方式为 /${prefixRouter}/pagename
ssr: true, // 是否全局关闭服务端渲染
ssrCache: true, // 是否全局使用服务端渲染缓存 第一次ssr,再次采用缓存,适用与存静态资源或者所有人访问的页面都是一样的工程
statiPages: [], // 纯静态页面 执行一次服务端渲染,之后采用缓存html
ssrIngore: null or new RegExp() // 指定某一个或者多个page项目不采用服务端渲染
}
服务端渲染预初始化数据
和next类似,ssr之前调用页面组件静态方法
getInitialProps
,参数接受ctx
对象import React, { Component } from 'react'; require('es6-promise').polyfill(); require('isomorphic-fetch'); class App extends Component { constructor(props) { super(props); console.log(props); this.state = { userAgent: props.userAgent }; } static async getInitialProps({ req }) { const userAgent = req ? req.headers['user-agent'] : navigator.userAgent; const res = await fetch('http://localhost:8001/test.json'); const json = await res.json(); return { text: json.text, userAgent: userAgent }; } render() { return ( <div className="demo"> state:{this.state.userAgent} propts:{JSON.stringify(this.props)} </div> ); } } module.exports = App;
组件pops默认接收请求中query参数
服务端渲染时,默认会将url请求中的参数作为props传递给组件
待办
- 服务端渲染模式初始化props如何在客户端渲染时保持 数据注水 【完成】
- 客户端渲染时query参数作为props实现 【完成】
- 服务端渲染开发环境热启动 【完成,热加载客户端代码】
- dll公共模块构建,代码切割 【未开始】
- index.d.ts支持ts中使用 && wf-node集成例子 【未开始】
- 云平台环境hmbrid 命令提示找不到
2.0.0
4 years ago