使用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 相关文章推荐
实测jquery data()如何存值
Aug 18 Javascript
js特殊字符转义介绍
Nov 05 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
vue2里面ref的具体使用方法
Oct 27 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
vue实现滑动到底部加载更多效果
Oct 27 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 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 中使用随机数的三个步骤
2006/10/09 PHP
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
Python实现的三层BP神经网络算法示例
2018/02/07 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
python判断无向图环是否存在的示例
2019/11/22 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
python怎么调用自己的函数
2020/07/01 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
事业单位公务员的职业生涯规划
2014/01/15 职场文书
给女儿的表扬信
2014/01/18 职场文书
岗位职责的构建方法
2014/02/01 职场文书
2014年两会学习心得范例
2014/03/17 职场文书
校长新学期寄语2016
2015/12/04 职场文书
python3操作redis实现List列表实例
2021/08/04 Python