使用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 相关文章推荐
window.onbeforeunload方法在IE下无法正常工作的解决办法
Jan 23 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
javascript事件模型介绍
May 31 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
Vue基于NUXT的SSR详解
Oct 24 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
vue根据条件不同显示不同按钮的操作
Aug 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
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
php获取远程文件大小
2015/10/20 PHP
PHP Cookie学习笔记
2016/08/23 PHP
php字符集转换
2017/01/23 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
Python实现字典依据value排序
2016/02/24 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
python计算无向图节点度的实例代码
2019/11/22 Python
python十进制转二进制的详解
2020/02/07 Python
python中Mako库实例用法
2020/12/31 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
大学生个人求职口试自我评价
2014/02/16 职场文书
弄虚作假心得体会
2014/09/10 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android
python3中apply函数和lambda函数的使用详解
2022/02/28 Python