ykit + react(16) + react-router(v4) ssr 插件
可以利用该插件初始化项目,在一个空的目录下执行:
ykit init ssr
会在当前目录下生成一个初始工程。然后启动项目:
ykit start
访问 https://localhost:3000/ 即可。
代码主要分为两部分
首先业务需要提供一个 index.js 来配置页面,一个简单的示例:
import 'babel-polyfill';
// 引入页面
import Home from './home';
import Detail from './detail';
// 引入 axios 来获取数据
import axios from 'axios';
// 需要实现一个 getPages 方法来配置页面
export function getPages() {
return [
{
path: '/', // 路径规则
component: Home, // 页面组件
exact: true, // 同 react-router <Route> 的 exact 属性
getProps: async() => { // 可在这里获取页面需要的数据
const { data: posts } = await axios.get(
'https://yapi.demo.qunar.com/mock/818/tvmaze/list'
);
return { posts };
}
}, {
path: '/detail/:id',
component: Detail
}
];
}
通过 index.js
封装了页面的各项配置,业务不需要再自己配置 router,只用编写页面组件并从 index.js
引入即可。
业务不需要关心里面有什么,也不需要管理和维护它,由工具自动生成。如果有特殊需求也可以去进行改动。
这样一来,业务不用关心服务端代码,以及 web 和 hy 如何适配,只要根据页面编写业务逻辑即可。同时还可以配置 getProps 来获取初始属性(页面数据等),框架可以智能地提前加载数据来渲染页面(由框架决定是在服务端还是客户端获取数据)。
通过引入 ssr 目录下封装的 link
组件(TODO: 这里需要封装到工具里,而不是从路径引),即可实现页面跳转,使用方法同 react-router v4 中的 <Link>
。
import Link from '../ssr/share/link';
const Home = (props) => {
return (
<div>
<h1>Home Page</h1>
<Link to={`/detail`}>
<p>点击我可以跳转到详情页</p>
</Link>
</div>
)
}
首先构建前端资源:
ykit pack -m
然后可以直接使用 pm2 等进行部署,如:
NODE_ENV=production pm2 start ssr/bin/start