使用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 TO HTML 转换
Jun 26 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
修复ie8&chrome下window的resize事件多次执行
Oct 20 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
jquery easyui使用心得
Jul 07 Javascript
jquery获取当前日期的方法
Jan 14 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 Javascript
jQuery轮播图实例详解
Aug 15 jQuery
对vuex中store和$store的区别说明
Jul 24 Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 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/11/28 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
ext form 表单提交数据的方法小结
2008/08/08 Javascript
优化javascript的执行速度
2010/01/23 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
Python程序运行原理图文解析
2018/02/10 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
如何基于python生成list的所有的子集
2019/11/11 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
pytorch masked_fill报错的解决
2020/02/18 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
公共事业管理本科生求职信
2013/10/07 职场文书
信息专业本科生个人的自我评价
2013/10/28 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
服装设计专业求职信
2014/06/16 职场文书
生活部的活动方案
2014/08/19 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
小学毕业感言100字
2015/07/30 职场文书
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis