对比next.js

修改

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

数据初始化对比

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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", 完全支持所有的子组件的数据初始化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import * as React from 'react';

const {
  Cola,
  include
} = require('koa-cola/client');
// Child1, Child2 是react-redux的组件，并且会进行数据初始化
const Child1 = require('../components/child1').default;
const Child2 = require('../components/child2').default;

export interface Props {}
export interface States {}

@Cola({})
@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