• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

myronliu/ssr-koa-react-redux: 一个简单的服务端渲染的框架-------->约750行代码 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

myronliu/ssr-koa-react-redux

开源软件地址:

https://github.com/myronliu/ssr-koa-react-redux

开源编程语言:

CSS 95.8%

开源软件介绍:

服务器启动步骤

1、npm install 2、npm start

或者

1、yarn install 2、yarn start

搭建一个服务端渲染的程序

第一步:技术选型

1、node
2、koa
3、页面路由react-router(要满足客户端和服务端路由的选择)
4、接口代理koa-proxy
4、单页面状态管理react-redux
5、view层展示与交互react
6、UI插件antd
7、服务端页面转string,react-dom/server  renderToString(function)
8、客户端页面渲染,react-dom  render(function)
9、打包webpack

第二步:开始搭建

资源准备———>

1、app(文件夹):主要放置程序代码
2、assets(文件夹):主要放置静态资源
3、views
4、模版ejs

准备包&打包配置&客户端入口文件———>

5、package.json
6、webpack.build.js & 创建客户端js的入口文件app.js

准备服务端运行文件———>

7、创建服务端程序入口:index.js
8、创建routers文件夹,并创建服务端的路由server.js(此处可以先写一个直接返回到客户端的代码)

准备业务页面———>

9、创建页面路由/app/router.js
10、创建页面文件夹pages以及各页面文件      // Redux待研究
    1、App.js
    2、Home.js
    3、News.js
11、创建文件夹actions以及各个action
    1、home.js
    2、news.js
12、创建reduers文件夹以及各个reducer
    1、home.js
    2、news.js
    3、index.js
13、创建store文件夹以及store文件

将业务页面返回给客户端———>

14、完善服务端路由/router/server.js
    1、匹配客户端URL
    2、调render方法,将页面返回给客户端
15、创建/routers/render.js文件
    1、遍历所有的组件,获取静态的fetch方法,如果配置了ServerRender字段为true,则将此方法压入数组中
    2、利用promise,将所有接口同时发起请求
    3、所有接口请求完毕,将数据传入组件中,渲染出组件
    4、将上一步渲染出的组件,利用react-dom/server提供的renderToString,将其转化为字符串
    5、将字符串、以及页面其他需要的信息打入模版文件的占位符中
    6、返回信息到客户端

准备好静态资源———>

16、加入css\react…等静态资源

准备好客户端执行的js———>

17、加入客户端js,让整个页面动起来客户端———>渲染
    1、在/app/app.js中使用react-dom render出包括在 react-redux提供的Provider中的router.js即可



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
winflag10/KoalaSEO-Task发布时间:2022-07-10
下一篇:
永乐国际平台_永乐国&#3 ...发布时间:2022-07-10
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap