因为对网页SEO的需要,要把之前的反应项目改造为服务端渲染,经过一番调查和研究,查阅了大量互联网资料。成功踩坑。
选型思路:实现服务端渲染,想用反应最新的版本,并且不对现有的写法做大的改动,如果一开始就打算服务端渲染,建议直接用下一个框架来写
项目地址:https://github.com/wlx200510/react_koa_ssr
脚手架选型:webpack3.11.0 +反应Router4 +回来的+ koa2 + React16 + Node8。x
主要心得:对反应的相关知识更加熟悉,成功拓展自己的技术领域,对服务端技术在实际项目上有所积累
注意点:使用框架前一定确认当前webpack版本为3。节点为8. x以上,读者最好用反应在3个月以上,并有实际反应项目经验
<强>项目目录介绍
├──资产
│└──指数。css//放置一些全局的资源文件可以是js图片等
├──配置
│├──webpack.config.dev.js开发环境webpack打包设置
│└──webpack.config.prod。js生产环境webpack打包设置
├──package.json
├──README.md
├──服务器服务器端渲染文件,如果对不是很了解,建议参考(洋槐教程)(http://wlxadyl.cn/2018/02/11/koa-learn/)
│├──app.js
│├──clientRouter。js//在此文件中包含了把服务端路由匹配到反应路由的逻辑
│├──ignore.js
│└──index.js
└──src
├──应用此文件夹下主要用于放置浏览器和服务端通用逻辑
│├──configureStore。js//redux-thunk设置
│├──createApp。js//根据渲染环境不同来设置不同的路由器模式
│├──index.js
│└──路由器
│├──index.js
│└──路线。js//路由配置文件!重要
├──资产
│├──css放置一些公共的样式文件
││├──_base。scss//很多项目都会用到的初始化css
││├──index.scss
││└──my.scss
│└──img
├──组件放置一些公共的组件
│├──FloatDownloadBtn公共组件样例写法
││├──FloatDownloadBtn.js
││├──FloatDownloadBtn.scss
││└──index.js
│├──Loading.js
│└──模型。js函数式组件的写法
│
├──favicon.ico
├──指数。ejs//渲染的模板如果项目需要,可以放一些公共文件进去
├──指数。js//包括热更新的逻辑
├──页页面组件文件夹
│├──回家
││├──组件//用于放置页面组件,主要逻辑
│││└──homePage.js
││├──容器//使用连接来封装出高阶组件注入全局状态数据
│││└──homeContainer.js
││├──指数。js//页面路由配置文件注意铛属性
││└──减速器
││└──指数。js//页面的减速器这里暴露出来给商店统一处理注意写法
│└──用户
│├──组件
││└──userPage.js
│├──容器
││└──userContainer.js
│└──index.js
└──商店
├──操作//各操作存放地
│├──home.js
│└──thunk.js
├──常数。js//各动作名称汇集处防止重名
└──还原剂
└──指数。js//引用各页面的所有减速机在此处统一结合处理
<强>项目的构建思路
<李>本地开发使用webpack-dev-server,实现热更新,基本流程跟之前反应开发类似,仍是浏览器端渲染,因此在编写代码时要考虑到一套逻辑,两种渲染环境的问题。
<李>当前端页面渲染完成后,其路由器跳转将不会对服务端进行请求,从而减轻服务端压力,从而页面的进入方式也是两种,还要考虑两种渲染环境下路由同构的问题。
<李>生产环境要使用高雅做后端服务器,实现按需加载,在服务端获取数据,并渲染出整个HTML,利用React16最新的能力来合并整个状态树,实现服务端渲染。
<强>本地开发介绍
查看本地开发主要涉及的文件是src目录下的index.js文件,判断当前的运行环境,只有在开发环境下才会使用module.hot的API,实现当减速器发生变化时的页面渲染更新通知,注意其中水合的方法,这是v16版本的一个专门为服务端渲染新增的API的方法,它在渲染方法的基础上实现了对服务端渲染内容的最大可能重用,实现了静态DOM到动态节点的过程。实质是代替了v15版本下判断校验和标记的过程,使得重用的过程更加高效优雅。
