koa-cola:只需一个react组件,同时支持单页应用(SPA)和服务器渲染(SSR)

全兴运
2023-12-01

koa-cola是一个基于koa和react的服务器端SSR(server side render)和浏览器端的SPA(single page application)的web前后端全栈应用框架。

koa-cola使用typescript开发,使用d-mvc(es7 decorator风格的mvc)开发模式。另外koa-cola大量使用universal ("isomorphic") 开发模式,比如react技术栈完全前后端universal(server端和client端均可以使用同一套component、react-redux、react-router)。

koa-cola的开发风格受sails影响,之前使用过sails开发过大型的web应用,深受其约定优先配置的开发模式影响。

特点

  • SSR+SPA的完整方案,只需要一份react代码便可以实现:服务器端渲染+浏览器端bundle实现的交互
  • 使用koa作为web服务(使用node8可以使用最新的v8高性能原生使用async/await)
  • 使用typescript开发
  • 使用完整的react技术栈(包括react-router和react-redux)
  • react相关代码前后端复用(包括component渲染、react-router和react-redux)

如何使用

koa-cola支持node.js的版本包括7.6和8,建议使用8,因为8.0使用的最新的v8版本,而且8.0会在今年10月正式激活LTS,因为koa-cola的async/await是原生方式使用没有经过transform,所以不支持node7.6以下的node版本。

  • npm i koa-cola ts-node -g 安装全局koa-cola和ts-node
  • koa-cola new koa-cola-app 在当前文件夹创建名字为app的新koa-cola项目,创建完整的目录结构,并自动安装依赖
  • cd koa-cola-app
  • koa-cola dev dev模式启动,build webpack bundle、launch项目、并自动打开浏览器

视频演示

对比next.js

next.js是一个比较流行的也是基于react的SSR的应用框架,不过在react技术栈,next.js只支持component和react-router,并没有支持redux,在服务器端,也没有太多支持,比如controller层和express/koa中间件,服务器端只是支持简单的路由、静态页面等,koa-cola则是提供前后端完整的解决方案的框架。

在数据初始化,两者有点类似,next.js使用静态方法getInitialProps来初始化数据:

import React from 'react'
export default class extends React.Component {
  static async getInitialProps ({ req }) {
    return req
      ? { userAgent: req.headers['user-agent'] }
      : { userAgent: navigator.userAgent }
  }
  render () {
    return <div>
      Hello World {this.props.userAgent}
    </div>
  }
}

koa-cola提供两种方式来进行数据初始化,更加灵活。

而且,next.js不支持子组件的数据初始化:

Note: getInitialProps can not be used in children components. Only in pages.

koa-cola则只需要加上decorator "include", 完全支持所有的子组件的数据初始化。

import * as React from 'react';

var {
  asyncConnect,
  include
} = require('koa-cola').Decorators.view;
// Child1, Child2 是asyncConnect的组件,并且会进行数据初始化
var Child1 = require('../components/child1').default;
var Child2 = require('../components/child2').default;

export interface Props {}
export interface States {}

@asyncConnect([])
@include({
  Child1,
  Child2
})
class MultiChildren extends React.Component<Props, States> {
  constructor(props: Props) {
    super(props);
  }
  render() {
    return <div>
        <Child1 {...this.props} />
        <Child2 {...this.props} />
      </div>
  }
}

export default MultiChildren;

koa-cola不但可以支持component的数据初始化,还可以合并page和component的reducer,使用同一个store,page和component的redux无缝结合。详细可参考多子组件的redux页面例子源码在线Demo

Examples

使用官方react-redux的todolist作为基础,演示了官方的和基于koa-cola的例子(完整的mvc结构)

demo依赖本地的mongodb

online demo

使用方法:

  • npm i koa-cola ts-node -g
  • git clone https://github.com/koa-cola/todolist
  • cd todolist
  • npm i
  • koa-cola dev

更多详情请查看官方文档

 类似资料: