@umajs/plugin-react-ssr

In umajs, React is used to develop the plug-in of SPA and MPA, which supports server-side rendering and client-side rendering


Keywords
koa-react-ssr, react, redux, ssr, umajs, umajs-react-ssr, umajs-ssr
License
MIT
Install
npm install @umajs/plugin-react-ssr@2.0.7

Documentation

@umajs/plugin-react-ssr

针对Umajs提供React服务端渲染模式的开发插件,插件基于服务端渲染骨架工具Srejs开发。

插件介绍

plugin-react-ssr插件扩展了Umajs中提供的统一返回处理Result对象,新增了reactView页面组件渲染方法,可在controller自由调用,使用类似传统模板引擎;也同时将方法挂载到了koa中间件中的ctx对象上;当一些公关的页面组件,比如404、异常提示页面、登录或者需要在中间件中拦截跳转时可以在middleware中调用。

插件安装

 yarn add @umajs/plugin-react-ssr --save

插件配置

// plugin.config.ts
export default <{ [key: string]: TPluginConfig }>{
    'react-ssr': {
        enable:true,
        options:{
            rootDir:'web', // 客户端页面组件根文件夹
            rootNode:'app', // 客户端页面挂载根元素ID
            ssr: true, // 全局开启服务端渲染
            cache: false, // 全局使用服务端渲染缓存 开发环境设置true无效
            prefixCDN: '/' // 客户端代码部署CDN前缀
        }
    }
};

web 目录结构

- web # rootDir配置可修改
        - pages # 固定目录
            - home #页面名称
                - index.tsx
                - index.scss

创建 react 页面组件

页面组件开发模式支持 js ,tsx。

import './home.scss'
import React from 'react'
type typeProps = {
  say: string
}
export default function (props: typeProps) {
  const { say } = props
  return <div className="ts-demo">{say}</div>
}

路由中使用插件

import { BaseController, Path } from '@umajs/core'
import { Result } from '@umajs/plugin-react-ssr'

export default class Index extends BaseController {
  @Path('/')
  index() {
    return Result.reactView(
      'home',
      { say: 'hi,I am a ReactView' },
      { cache: true }
    )
  }
}

使用文档

案例