一、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：安装expressnpm 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 [email protected]/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