使用Node搭建reactSSR服务端渲染架构

站长资源 2024/11/26 佚名

11 1538 11

DDR爱好者之家 Design By 杰米

如题；本文所讲架构主要用到技术栈有： 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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

Node,reactSSR服务端渲染,Node,服务端渲染

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“使用Node搭建reactSSR服务端渲染架构”

暂无评论...

使用Node搭建reactSSR服务端渲染架构

原生JS实现的简单小钟表功能示例

webpack4+Vue搭建自己的Vue-cli项目过程分享

评论“使用Node搭建reactSSR服务端渲染架构”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接