@srejs/vue3-webpack

Server rendering engine, abbreviated as srejs, is the server-side rendering engine. It provides the simplest and most flexible react and Vue lightweight server-side rendering skeleton tool for each node development framework, and supports the use in any koa framework.

Server rendering engine 缩写为 Srejs, 即服务器端渲染引擎，为各个node开发框架提供最简单，最灵活的React，Vue轻量级服务端渲染骨架工具，支持在任何koa框架中使用。

目录

框架默认配置属性rootDir默认为根目录下web，pages下是页面组件入口，比如list页面，目录结构为list/index.js

└── web
    └── pages
        └── list
            ├── index.tsx
            └── index.scss

页面组件

import React from 'react';
type typeProps = {
    ListData :[string]
}
export default function (props:typeProps){
     const {ListData} = props;
    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>
    )
}

在Koa中使用

Srejs支持在koa中间件中使用，通过此能力我们可以对任何基于Koa的开发框架进行插件封装，比如Umajs,egg,nest,推荐使用@umajs/plugin-react-ssr提供的解决方案。后续也会发布针对egg,nest使用的插件。

yarn add @srejs/react --save

// app.js
const Koa = require('koa');
const srejs = require('@srejs/react');
const app = new Koa();
// srejs服务端渲染基于koa封装，开启ssr时需传入koa实例对象
const Srejs = new srejs(app，process.env.NODE_ENV != 'production',false,{
    ssr: true, // 开启服务端渲染
    cache: false, // 开启缓存
    rootDir: 'web', // 工程根文件夹目录名称
    rootNode: 'app', // 客户端渲染挂载根元素ID
}); 

app.use(async (ctx,next)=>{
    if(ctx.path==="/list"){
       const html = await Sre.render(ctx,'list',{ListData:['item1','item2','item3','item4',]},{ssr:true,cache:true}); 
       ctx.type = 'text/html';
       ctx.body = html;
    }else{
        await next();
    }
})

app.listen(8001);

API

• constructor(app: Koa, dev?: boolean, defaultRouter?: boolean, options?: TcoreOptions)

参数	说明	默认值
app	koa实例对象	必传
dev	开发模式(NODE_ENV=development)	true
defaultRouter	默认路由(按照页面组件命名映射后端路由)	false
options	框架配置属性	{ssr: true, cache: false, rootDir: 'web', rootNode: 'app',}

• render(ctx: Koa.Context, viewName: string, initProps?: object, options?: TssrOptions): Promise.resove(string);

参数	说明	默认值
ctx	请求上下文	必传
viewName	页面组件名称	必传
initProps	页面组件初始化props数据	无
options	单页面组件运行配置	{ssr: true, cache: false}

属性类型说明

type TssrOptions = {
    ssr: boolean; // 开启服务端渲染
    cache?: boolean; // 开启缓存
};

type TcoreOptions = {
    ssr?: boolean; // 开启服务端渲染
    cache?: boolean; // 开启缓存
    rootDir?: string; // 工程根文件夹目录名称
    rootNode?: string; // 客户端渲染挂载根元素ID
    prefixCDN?: string, // 构建后静态资源CDN地址前缀
    prefixRouter?: string, // 默认页面路由前缀(在defaultRouter设置为true时有效)
};

配置文件

框架也提供静态配置文件方式初始化框架数据，配置文件中的属性将自动和使用时传入的配置进行合并。

// config/ssr.config.js
module.exports = {
    ssr: true, // 开启服务端渲染
    cache: false, // 开启缓存
    rootDir: 'web', // 工程根文件夹目录名称
    rootNode: 'app', // 客户端渲染挂载根元素ID
    prefixCDN: '/', // 构建后静态资源CDN地址前缀
    prefixRouter: '', // 默认页面路由前缀(在defaultRouter设置为true时有效)
}

构建部署

"scripts": {
    "build":"npx srejs build" // 生产环境部署前预编译构建
},

更多说明

• 页面组件和路由
• 数据获取
• typescript
• css-modules
• 自定义html

example

• uma-css-module
• uma-react-redux
• uma-useContext-useReducer

谁在使用

• umajs-react-ssr
• plugin-react-ssr