时间:2021-05-25
如题;本文所讲架构主要用到技术栈有: 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这个模板引擎文件从而达到服务端渲染的目的。
项目结构
这里把项目主要的文件夹结构放到最后。
项目GitHub地址: https://github.com/Uwah/node-react
后期部署上服务器之后会找个时间更新博客,主要是用到pm2
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
首先,这个例子用到了服务端渲染的技术。服务端渲染,说白了就是在服务端使用模板引擎,这里我先简单的介绍一下服务端渲染与客户端渲染之间的区别。服务端渲染与客户端渲染
近期使用node做服务端渲染,作为中间层需要请求后端接口,需要封装服务端的请求,接下来来了解下如何使用request。基本使用constrequest=requ
服务端渲染简介服务端渲染不是一个新的技术;在Web最初的时候,页面就是通过服务端渲染来返回的,用PHP来说,通常是使用Smarty等模板写模板文件,然后PHP服
>初学ssr入坑初学vue服务端渲染疑惑非常多,我们大部分前端都是半路出家,上手都是前后端分离,对服务端并不了解,不说java、php语言了,连node服务都还
学习react也有一段时间了,使用react后首页渲染的速度与seo一直不理想。打算研究一下react神奇服务端渲染。react服务端渲染只能使用nodejs做