使用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 RadioButtonList获取选中值
Apr 09 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
原生javascript实现分页效果
Apr 21 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
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
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
javascript闭包的理解
2015/04/01 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
python发送邮件脚本
2018/05/22 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
python 实现生成均匀分布的点
2019/12/05 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
弘扬雷锋精神演讲稿
2014/05/10 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
班主任寄语2015
2015/02/26 职场文书
先进个人自荐书
2015/03/06 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
python pyhs2 的安装操作
2021/04/07 Python
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js