一、CSR客户端渲染的模式（vue、react）
页面由js渲染，js运行于浏览器端，所以称客户端渲染。
基于react的csr渲染流程：
浏览器下载html文档→下载js→运行react代码渲染页面→展示页面
优势：
1.前后端分离的架构，利于开发效率的提升
缺点：
1、TTFP 首屏渲染时间比较长（首屏加载速度慢）
2、不能SEO （搜索引擎优化） 。大多数搜索引擎的爬虫只能识别html中的内容，无法识别js中内容。
主流服务器渲染框架：
1.nuxt.js——vue
2.next.js——react
二、SSR服务器端渲染
流程：服务器生成html→浏览器从服务器下载html→页面展示
node：LTS是文档版本，Current是最新版本
用node创建一个http服务器：
cd project_name
1：npm init
生成一个package.json文件，使得文件夹变成一个node的包，一个node写的代码便于管理
2：安装express
npm install express --save
新增一个app.js文件
运行node app.js命令。
浏览器中访问：
结语：如果代码是由服务器来决定的，这种渲染方式就是服务器端渲染。
服务器生成内容→服务器给到浏览器→浏览器进行渲染显示。
页面上的内容是由服务器生成的。
三、在服务器端编写react组件
浏览器发送请求→服务器运行react代码生成页面→服务器返回页面浏览器显示
1.让服务器端支持react
在node http服务器目录下，安装react： npm install react --save
在node中使用common js的语法来进行react的引入
新建Home react组件
在index.js中引入home
修改package.json
2、安装webpack使得得以运行jsx编译为普通js
a.npm install webapck webpack-cli --save
b.新增一个webpack配置文件 webpack.server.js
安装babel支持：
npm install babel-loader @babel/core --save
安装preset的react包：
npm install @babel/preset-react --save
安装preset的stage-0包：
npm install@babel/preset-stage-0
安装env包
npm install @babel/preset-env --save
webpack.server.js内容：
c.webpack的编译打包
webpack --config webpack.server.js
修改package.json start处 指向 bundle.js
运行npm run start
增加了打包编译的配置后，现在页面上可以通过es6 moudle的形式进入引入和抛出
四：将HOME组件中的内容渲染到页面
1、添加react-dom。
npm install react-dom --save
2、从react-dom/server中引入renderToString 方法，并将home组件以标签的形式（jsx）传入该方法，有jsx语法就必须要react,所以在页面上引入react
短命令的配置：
运行npm run build, npm run start启动后页面正确展示了home组件中的内容。
优化src/index.js中的代码
五 阶段总结：react的服务器端渲染实际是建立在虚拟dom的机制上
在服务器端：react将虚拟dom通过renderToString 方法转为string，并传给浏览器。
// 客户端渲染中，React代码在浏览器上执行运行，消耗的是用户浏览器的性能。
// 服务器端渲染：
React代码在服务器上执行，消耗的是服务器端的性能。
弊端：React代码在服务器上执行，消耗的是服务器端的性能。
react极大的消耗了服务器端的性能。需要增加服务器来应付业务。
六： webpack的自动打包与服务器自动重启
why? 每次修改代码后都要运行npm run build 和npm run start。
实现webpack自动打包：
在webpack --config webpack.server.js --watch 命令中添加 --watch参数。
一直处于监听变化中。每当有文件变动，都会重新打包一次。
实现服务器自动重启：
全局安装第三方模块nodemon:npm install nodemon -g
修改start短命令为
"nodemon --watch build --exec node \"./build/bundle.js\"" （这里和同样功能的Supervisor的使用进行比较，加深记忆）
页面刷新实现自打包自启动。
再次基础上我们运行项目是需要启动两个窗口，一个运行npm run build 来监听代码的改变来自动打包，一个运行npm run start 来监听bundle文件的改变来自动重启服务。
启动服务的进一步简化：用 npm-run-all 实现一次性运行两个命令
全局安装npm install npm-run-all -g
修改package.json中的短命令：
实现同时启动服务器和监听文件
运行npm run dev
每当修改代码，页面刷新即可更新页面。