开源 | Umajs框架react-ssr同构最佳实践方案

\- src  (umajs)\- web （前端）     \- pages       \- list (页面组件)         \- index.tsx (页面入口)        \- index.scss    \- component （公共组件）    \- ...

import React from 'react';type typeProps = {    ListData :[string]}export default function (props:typeProps){     const ListData = ['itme1','itme2','itme3','itme4'];    return (        <div className="list" style={{textAlign: 'center'}}>            <h3>列表</h3>            <ul>                {ListData.map((item,value)=>{                    return (                        <li key={value}>                              <div className="item">{item}</div>                        </li>                    )                })}            </ul>        </div>    )}

import { BaseController,Path , Query} from '@umajs/core';import { Result } from '@umajs/plugin-react-ssr'
export default class Index extends BaseController {    @Path("/","/list")    index() {        return Result.reactView('list');    }   @Path("/","/ABlist")   index(@Query('abtest') abtest:string) {      let viewName = 'list'+abtest;      return Result.reactView(viewName);    }}

import { BaseController,Path ,Param} from '@umajs/core';import { Result } from '@umajs/plugin-react-ssr'
export default class Index extends BaseController {    @Path("/detail:id")    index(@Param('id') id:string) {        const detailData = this.detailService.get(id);        return Result.reactView('detail',detailData);    }}

//web/browserRouter/index.jsimport React, { Component } from 'react';import { Route, Switch } from 'react-router-dom';export default class APP extends Component {    render() {        return (            <div className="demo">                <Switch>                    <Route exact path="/" component={Home} />                    <Route exact path="/about" component={About} />                    <Route component={Home} />                </Switch>            </div>        );    }}

import { BaseController,Path ,Parms} from '@umajs/core';import { Result } from '@umajs/plugin-react-ssr';
export default class Index extends BaseController {    @Path("/browserRouter","/browserRouter/:path")  //// 服务端路由和react-router路由规则保持一致    browserRouter() {      return Result.reactView('browserRouter');    }}

function Page(props) {  return <div> {props.name} </div>}
Page.getInitialProps = async (ctx) => {  return Promise.resolve({    name: 'Egg + React + SSR',  })}
export default Page

import { BaseController,Path } from '@umajs/core';import { Result } from '@umajs/plugin-react-ssr'
export default class Index extends BaseController {    @Path("/list")    index() {        const ListData = ['itme1','itme2','itme3','itme4','itme5','itme6','itme7','itme8'] //服务端加工初始化props        return Result.reactView('list',{title:'列表',ListData},{cache:true});    }}

import { useReducer } from 'react';import { ActionType } from '../interface';
export default (props:any) => {    function reducer(state: any, action: ActionType) {        switch (action.type) {            case 'updateContext':
                return { ...state, ...action.payload };            default:                throw new Error(`Action type ${action.type} is incorrect`);        }    }
    return useReducer(reducer, { …props });};

import React from 'react';import { MixStateAndDispatch } from './interface';
const Context = React.createContext<MixStateAndDispatch<any>>({ state: {} });
export default Context;

import React from 'react';import Recommend from '../../components/recommend';import Search from '../../components/search';import Context from '../../context';import useContextHooks from '../../hooks/useContextHooks';
export default (props: Ddata) => {        //自定义hooks初始化state和提供dispatch    const [state, dispatch] = useContextHooks(props);    return (        <Context.Provider value = {{ state, dispatch }}>            <div>                <Search></Search>                <Recommend/>            </div>        </Context.Provider>    );};

import React, { useContext } from 'react';import Context from '../../context';
function Recommend() {    const { state, dispatch } = useContext(Context);    return (        <div>           {state.RecomemendList.map((recomd)=>{               return (                     <List key={recomd.id} {...recomd}/>               )           })}        </div >    );}
export default Recommend;

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <meta charset="utf-8">    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width">    <meta name="format-detection" content="telephone=no">    <meta name="format-detection" content="email=no">    <meta name="format-detection" content="address=no;">    <meta name="apple-mobile-web-app-capable" content="yes">    <meta name="apple-mobile-web-app-status-bar-style" content="default">    <meta name="keywords" content="{{keywords}}">    <title>{{title}}</title>    <!-- 引入第三方外链样式文件 --></head>
<body>    <div id="tempate">{{msg}}</div>    <div id="app"></div>      <!-- 引入第三方SDK --></body></html>

// 服务端路由初始化页面数据时传递的数据都可以在html中通过nunjucks模板引擎进行渲染export default class Index extends BaseController {    @Path("/list")    index() {        const ListData = ['itme1','itme2','itme3','itme4','itme5','itme6','itme7','itme8']        return Result.reactView('list',{title:'列表',keywords:'ssr,umajs-react-ssr'，ListData},{cache:true,useEngine:true});     }}

import React from 'react';import style from './index.module.css';
type typeProps = {    des: string;};export default function (props: typeProps) {    return (        <div className={style.home}>            <p className={style.title}>css modules</p>            <p>Srejs按照样式文件名称进行开启和关闭css modules，样式文件规则为：xxx.modules.(less|scss|css)。</p>            <div className={style.des}>{props.des}</div>            <a href="https://github.com/dazjean/Srejs/blob/mian/doc/cssModules.md">更多css-modules使用请查看文档</a>        </div>    );}

 // src/config/plugin.config.ts    export default <{ [key: string]: TPluginConfig }>{        'react-ssr': {            enable:true,            options:{                rootDir:'web',// Pages目录根路径                rootNode: 'app' // 页面根元素挂载ID                ssr: true, // 全局开启服务端渲染                cache: false, // 全局使用服务端渲染缓存 开发环境设置true无效                prefixCDN: '/' // CDN地址前缀             }        }    };

export default class Index extends BaseController {    @Path("/list")    index() {        const ListData = ['itme1','itme2','itme3','itme4','itme5','itme6','itme7','itme8']        return Result.reactView('list',{title:'列表',ListData},{cache:true}); //服务端数据是固定不变的 开启缓存，优化首屏加载时间    }}

export default class Index extends BaseController {    @Path("/list")    index() {        const ListData = ['itme1','itme2','itme3','itme4','itme5','itme6','itme7','itme8']        return Result.reactView('list',{title:'列表',ListData},{ssr:false}); //流量高峰时可通过AB测或者其他方案动态调整服务端渲染和客户端渲染流量占比    }}