使用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 相关文章推荐
JS input 数字验证代码
Jul 30 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
小程序中this.setData的使用和注意事项
Aug 28 Javascript
简单了解JavaScript sort方法
Nov 25 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 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把网页保存为word文件的三种方法
2014/04/01 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
jQuery阻止同类型事件小结
2013/04/19 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
python取代netcat过程分析
2018/02/10 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
如何利用python查找电脑文件
2018/04/27 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
更新修改后的Python模块方法
2019/03/03 Python
浅析Python3 pip换源问题
2020/01/06 Python
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
委托书模板
2014/04/04 职场文书
《菜园里》教学反思
2014/04/17 职场文书
妇女干部培训方案
2014/05/12 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
网络妈妈观后感
2015/06/08 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android