使用Node搭建reactSSR服务端渲染架构


Posted in Javascript onAugust 30, 2018

如题;本文所讲架构主要用到技术栈有: Node, Express, React, Mobx, webpack4, ES6, ES7, axios, ejs,  log4js, scss,echarts,ant desige

SSR的概念

Server Slide Rendering,缩写为 ssr,即服务器端渲染,因为是后端出身,所以其实早就明白是怎么回事,只是没这个具体名词的概念罢了,这个词被频繁提起也是拜近年来前端飞速发展所赐,主要针对 SPA应用,目的大概有以下几个:

解决单页面应用的 SEO

单页应用页面大部分主要的 HTML并不是服务器返回,服务器只是返回一大串的 脚本,页面上看到的大部分内容都是由脚本生成,对于一般网站影响不大,但是对于一些依赖搜索引擎带来流量的网站来说则是致命的,搜索引擎无法抓取页面相关内容,也就是用户搜不到此网站的相关信息,自然也就无流量可言。

解决渲染白屏

因为页面 HTML由服务器端返回的脚本生成,一般来说这种脚本的体积都不会太小,客户端下载需要时间,浏览器解析以生成页面元素也需要时间,这必然会导致页面的显示速度比传统服务器端渲染得要慢,很容易出现首页白屏的情况,甚至如果浏览器禁用了 JS,那么将直接导致页面连基本的元素都看不到。使用Express初始化Node服务

开始本项目首先你的电脑要安装有node,npm这个没什么好说的。其次本次Node服务用的框架是express;所以要安装: express-generator

然后使用express your-project初始化你的express项目

npm install express-generator -g
//执行这条命令全局安装express-generator,如果你不想全局安装把-g去掉即可

初始化express项目之后我们开始把react,webpack整合到这个node服务上。

初始化React项目并整合webpack

这里整合webpack使用的是webpack4的版本,如果你熟悉vue-cli(vue-cli3之前的版本)的话你应该会知道webpack配置有多少个文件,这里参考了vue-cli生成的webpack配置。

添加src文件夹

src文件夹下的内容都是整个react的一些核心配置,如请求处理,css样式,公共组件,路由,页面,stores全局状态数据。

配置.babelrc

因为用到ES6,ES7语法所以要配置.babelrc文件。这个文件东西不多下面直接贴出代码

{
 "presets": [["es2015", { "modules": false }], "react", "stage-0"],
 "plugins": [
 "transform-decorators-legacy",
 ["import", { "libraryName": "antd", "style": "css" }],
 "transform-runtime"
 ]
}

修改Node服务app.js

其实主要是加上这句:app.use('/', reactSSR); 其就是为了项目启动的时候开启热更新并渲染views中reactSSR.ejs这个模板引擎文件从而达到服务端渲染的目的。

项目结构

这里把项目主要的文件夹结构放到最后。

使用Node搭建reactSSR服务端渲染架构

项目GitHub地址: https://github.com/Uwah/node-react

后期部署上服务器之后会找个时间更新博客,主要是用到pm2

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 新手24条实用建议[TUTS+]
Jun 21 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 Javascript
js播放wav文件(源码)
Apr 22 Javascript
关于js遍历表格的实例
Jul 10 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
Vue.js添加组件操作示例
Jun 13 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 #Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 #Javascript
简述vue状态管理模式之vuex
Aug 29 #Javascript
jQuery实现的简单手风琴效果示例
Aug 29 #jQuery
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 #Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 #jQuery
JS实现数组的增删改查操作示例
Aug 29 #Javascript
You might like
用PHP实现WEB动态网页静态
2006/10/09 PHP
再次研究下cache_lite
2007/02/14 PHP
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
PHP反射学习入门示例
2019/06/14 PHP
一个用js实现控制台控件的代码
2007/09/04 Javascript
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
跟老齐学Python之集合的关系
2014/09/24 Python
解决uWSGI的编码问题详解
2017/03/24 Python
Python遍历pandas数据方法总结
2018/02/09 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
Python request使用方法及问题总结
2020/04/26 Python
python怎么自定义捕获错误
2020/06/29 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
佳能德国网上商店:Canon德国
2017/03/18 全球购物
财务分析个人的自荐书范文
2013/11/24 职场文书
行政前台岗位职责
2013/12/04 职场文书
婚礼主持词
2014/03/13 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
《穷人》教学反思
2014/04/08 职场文书
分家协议书范本
2016/03/22 职场文书