如标题；本文描述的架构主要使用技术栈：node、express、react、mobx、webpack 4、es6、es7、axios、ejs、log4j s、scss、echarts、ant desige

安全部门改革的概念

服务器幻灯片呈现，缩写为ssr，是服务器端呈现。因为是后端出身，很早就明白是怎么回事了，但是没有这个具体名词的概念。由于近年来前端的快速发展，这个词被频繁提及。它主要针对SPA应用，目的如下：

解决单页应用的搜索引擎优化

单页应用页面的主HTML大部分不是服务器返回的，只有大量的脚本是服务器返回的。页面上看到的大部分内容都是脚本生成的，对一般网站影响不大，但对于一些依赖搜索引擎带来流量的网站来说却是致命的。搜索引擎抓取不到与页面相关的内容，也就是用户找不到这个网站的相关信息，自然就没有流量。

解决白屏渲染问题

因为页面HTML是由服务器返回的脚本生成的，一般来说，这个脚本的体积不会太小，客户端下载和浏览器解析生成页面元素都需要时间，必然会导致页面显示速度比传统服务器渲染慢，而且首页很容易白。即使浏览器禁用JS，也会直接导致页面看不到基本元素。使用快速初始化节点服务

要启动此项目，您的计算机应该安装有节点npm。没什么好说的。其次，这个Node服务的框架是express；所以安装：快速发电机

然后使用express your-project初始化您的express项目

NPM安装快速生成器-g//执行此命令以全局安装快速生成器。如果不想全局安装，可以初始化express项目。之后，我们开始将react和webpack集成到这个节点服务中。

初始化React项目并集成网络包

webpack 4的版本用于在这里集成webpack。如果您熟悉vue-CLI(VUE-CLI 3之前的版本)，您应该知道webpack配置中有多少文件。这里，请参考VUE命令行界面生成的网络包配置。

添加src文件夹

src文件夹中的内容是整个react的一些核心配置，例如请求处理、css样式、公共组件、路由、页面，以及存储全局状态数据。

配置。babelrc

因为使用了ES6和ES7语法，应该配置babelrc文件。这个文件里东西不多，代码就贴在正下方

{ '预设' : [['es2015 '，{ 'modules': false }]，' react '，' stage-0']，' plugins ' :[' transform-decorator-legacy '，['import '，{'library name' :' antd '，' style' :' CSS'}，' transform-runtime']}修改Node service app.js

其实这句话主要是加了：app。使用('/'，reaction SSR)；目的是在项目启动时启动热更新，在视图中渲染模板引擎文件reactSSR.ejs，从而达到服务器端渲染的目的。

项目结构

这里，把项目的主文件夹结构放在最后。

GitHub项目地址：https://github.com/Uwah/node-react

服务器后期部署后，我会找时间更新博客，主要用pm2

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