这个ssr 开发骨架有点帅

//创建项目$ npm install mmkrs-cli -g$ mmkrs -i ---> select project ---> <Your Project Name>$ cd <Your Project Name>$ npm i$ npm run dev //本地开发监听模式$ open http://<Your local ip>:8808
//快速创建页面$ cd <Your Project Name>$ mmkrs -i -----> select page ----> <Your  pageName>$ open http://<Your local ip>:8808/<Your  pageName>
//结束

import React from 'react';import BaseBundle from '../../../routes/route-base-bundle';
const LazyPageCom = (props) => (    <BaseBundle load={() => import(/*webpackChunkName:"chunk-detail"*/'../index')}>        {(CompIndex) => <CompIndex {...props} />}    </BaseBundle>);
export default [    {        path:'/detail',        component: LazyPageCom,        exact:true    },    {        path:'/detail/:id',        component: LazyPageCom    }]

import React,{useContext} from 'react';import { Link } from 'react-router-dom';import RootContext from '../../app/route-context';//自定义 contextimport KrsPageBase from '../../krs-base/common/components/krs-page-base';//基础组件 页面组件都需要继承import fetch from '../../common/fetch';//内置的 fech 模块
export default class Index extends KrsPageBase{
    constructor(props,context){        super(props,context);    }
    enableSpaDataCache=true;//开启 伪 pwa 数据缓存
    //得到 context 对象    static contextType = RootContext;
    //基础参数的带入    //opt={query:{},params:{}}      static async getInitialProps(krsOpt){//数据预取        
        if(__SERVER__){            //如果是服务端渲染的话  可以做的处理        }
       const fetch1= fetch.postForm('/fe_api/a', {            data: { a: 4000 }        });
       const fecth2= fetch.postForm('/fe_api/b', {            data: { c: 2000 }        });
        const resArr =await fetch.multipleFetch(fetch1, fecth2);               //返回数据固定格式  page 代表页面信息，支持 seo 的设置        //fetchData是接口返回的数据         return {            page:{                tdk: {                    title: 'ksr 框架',                    keyword: 'ssr react',                    description: '我是描述'                }            },            fetchData: resArr        }     }
    componentDidMount(){              //数据更新 参考       //this.isSSR 标识当前页面是否是 ssr 输出       //this.hasSpaCacheData标识是否有伪 pwa 的缓存数据
        if (!this.isSSR && !this.hasSpaCacheData){// 页面如果是客户端的需要重新获取数据            Index.getInitialProps(this.props.krsOpt).then(data=>{                this.setState({                    ...data                },()=>{                    document.title=this.state.page.tdk.title;                });            });        }    }
    render(){             const {page,fetchData}=this.state;//获得数据             //参考代码，需要对数据做边界容错处理
        return <div className="detailBox">                     <div>           {                    page && <div><span>title:{page.tdk.title}</span>                    <span>ky:{page.tdk.keyword}</span>                    </div>            }           </div>           {              res && res.data.map(item=>{                   return <div key={item.id}>{item.keyId}:{item.keyName}---{item.setContent}</div>               })           }        </div>    }}

cd 项目目录mmkrs-cli -i --->select page ---> 输入 pagename