如题,本文所讲架构主要用到技术栈有:节点,表达,反应,Mobx, webpack4, ES6, ES7,, axios, ejs,,,log4j, scss echarts,蚂蚁设计
<强> SSR的概念
服务器呈现下滑,缩写为苏维埃社会主义共和国,即服务器端渲染,因为是后端出身,所以其实早就明白是怎么回事,只是没这个具体名词的概念罢了,这个词被频繁提起也是拜近年来前端飞速发展所赐,主要针对温泉应用,目的大概有以下几个:
解决单页面应用的SEO
单页应用页面大部分主要的HTML并不是服务器返回,服务器只是返回一大串的脚本,页面上看到的大部分内容都是由脚本生成,对于一般网站影响不大,但是对于一些依赖搜索引擎带来流量的网站来说则是致命的,搜索引擎无法抓取页面相关内容,也就是用户搜不到此网站的相关信息,自然也就无流量可言。
解决渲染白屏
因为页面HTML由服务器端返回的脚本生成,一般来说这种脚本的体积都不会太小,客户端下载需要时间,浏览器解析以生成页面元素也需要时间,这必然会导致页面的显示速度比传统服务器端渲染得要慢,很容易出现首页白屏的情况,甚至如果浏览器禁用了JS,那么将直接导致页面连基本的元素都看不到。<强>使用表达初始化节点服务
开始本项目首先你的电脑要安装有节点,npm这个没什么好说的。其次本次节点服务用的框架是表达,所以要安装:<代码> express-generator
<>强然后使用表达您的项目的初始化你的表达项目
初始化表达项目之后我们开始把反应,webpack整合到这个节点服务上。
<强>初始化反应项目并整合webpack
这里整合webpack使用的是webpack4的版本,如果你熟悉vue-cli (vue-cli3之前的版本)的话你应该会知道webpack配置有多少个文件,这里参考了vue-cli生成的webpack配置。
<强>添加src文件夹
src文件夹下的内容都是整个反应的一些核心配置,如请求处理,css样式,公共组件,路,由页面,商店全局状态数据。
<>强配置.babelrc
因为用到ES6, ES7语法所以要配置.babelrc文件。这个文件东西不多下面直接贴出代码
<>强修改节点服务app.js
其实主要是加上这句:应用程序。使用('/',reactSSR);,其就是为了项目启动的时候开启热更新并渲染视图中reactSSR.ejs这个模板引擎文件从而达到服务端渲染的目的。
<强>项目结构
这里把项目主要的文件夹结构放到最后。
项目GitHub地址:https://github.com/Uwah/node-react
后期部署上服务器之后会找个时间更新博客,主要是用到pm2
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
