ssr与csr的优异

一、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

每当修改代码，页面刷新即可更新页面。