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

XGBCCC 发布于2019-08-22 10:54 / 1267人阅读

摘要：是一个基于和的服务器端和浏览器端的的前后端全栈应用框架。是的组件，并且会进行数据初始化不但可以支持的数据初始化，还可以合并和的，使用同一个，和的无缝结合。

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 
      Hello World {this.props.userAgent}
    
  }
}

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 {
  constructor(props: Props) {
    super(props);
  }
  render() {
    return 
        
        
      
  }
}

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

更多详情请查看官方文档

云服务器 GPU云服务器同时支持跨境和国内的电商erp 单页应用父子组件-动态渲染单页应用cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91414.html

揭开React中server-side rending的神秘面纱

摘要：与的兴起紧密相连。现在情况下，所有发送到端的请求都会被直接返回成。这样对于做的部门来说也是十分有利的。这个函数将会接受服务端渲染的代码并挂载事件处理函数。用于在渲染的过程中追踪可能的重定向请求比如需要根据响应重定向。原文地址：https://medium.freecodecamp.o... showImg(https://segmentfault.com/img/remote/14...

0x584a 2019-08-23 12:50 评论0 收藏0
使用 PHP 来做 Vue.js 的 SSR 服务端渲染

摘要：对于客户端应用来说，服务端渲染是一个热门话题。在服务器预渲染初始应用状态。重构这段脚本，使其可以在服务端运行。如果这些原因和你的情况吻合，那么使用进行服务端渲染将会是个不错方案。我已经发布两个库来支持的服务端渲染和专为应用打造的。 showImg(https://segmentfault.com/img/remote/1460000014155032);对于客户端应用来说，服务端渲染是...

李增田 2019-06-28 18:39 评论0 收藏0
React 服务端渲染完美的解决方案

摘要：服务端渲染两种方式根据上文介绍对服务端渲染利弊有所了解，我们可以根据利弊权衡取舍，最近在做服务端渲染的项目，找到多种服务端渲染解决方案，大致分为两类。第一种方式传统方式服务端渲染，解决用户体验和更好的，有诸多工具使用这种方式如的的等。最近在开发一个服务端渲染工具，通过一篇小文大致介绍下服务端渲染，和服务端渲染的方式方法。在此文后面有两中服务端渲染方式的构思，根据你对服务端渲染的利弊权...

DesGemini 2019-08-23 14:02 评论0 收藏0
2018年前端开发回顾

摘要：在整个年，看到发布版增加了许多功能，包括新的生命周期方法新的上下文指针事件延迟函数和。它在等待渲染异步响应时数据，是延迟函数背后用来管理组件的代码分割的。发布自第版开始将近年后，于年发布。前端发展发展迅速,非常的快。本文将回顾2018年一些重要的前端新闻，事件和 JavaScript 趋势。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ showImg(ht...

crelaber 2019-08-23 14:12 评论0 收藏0
vue服务端渲染demo将vue-cli生成的项目转为ssr

摘要：无需使用服务器实时动态编译，而是使用预渲染方式，在构建时简单地生成针对特定路由的静态文件。与可以部署在任何静态文件服务器上的完全静态单页面应用程序不同，服务器渲染应用程序，需要处于运行环境。更多的服务器端负载。目录结构 -no-ssr-demo 未做ssr之前的项目代码用于对比 -vuecli2ssr 将vuecli生成的项目转为ssr -prerender-demo 使用prer...

whinc 2019-08-22 16:07 评论0 收藏0