react服务器端渲染

1.服务器端渲染VS客户端渲染

服务器端渲染(SSR:server side render)：

                       服务器端去后台获取数据，将数据和页面元素进行拼装，组合后完成的html页面再直接返回给浏览器。这个过程叫服务器端渲染。（博客园）

                        判断是不是服务器渲染：右键点击查看网页源代码。如果页面上的所有字段都能在源代码中找到，说明是服务器端渲染产生、

客户端渲染：(CER:client side render)

                 数据由浏览器通过ajax获取，通过js将数据填充到dom元素上，最终展示到页面上。这个过程叫客户端渲染。（饿了么）

                  判断是不是服务器渲染：右键点击查看网页源代码。如果页面上的很多字段在源代码中找不到，并且在Network中有很多XHR请求。说明是服务器端渲染产生

主流SSR框架：REACT:next.js  VUE:nuxt.js

涉及到的后端 express和koa

2 优缺点

1.服务器端渲染需要消耗更多的服务器端资源（CPU,内存等），因为服务器端需要获取数据，整理数据，填充模板，最终生成HTML。

2.客户端渲染可以将静态资源部署到cdn而不是服务器上，减少服务器压力，实现高并发

3。服务器端渲染对SEO(搜索引擎优化)更友好。因为搜索引擎不能运行js,只能访问html,服务器端渲染一次性返回html

react服务器端渲染的实现

1. 构建编译与运行环境

   1.安装babel-node: npm install babel-cli -g(用来运行ES6)

2.安装编译react需要的组件 (转换ES6和JS代码的组件)

npm install babel-preset-react -S

npm install babel-preset-env -S

npm install babel-plugin-transform-decoratord-legacy -S

3.在package.json中设置运行命令

cross-env NODE_ENV=test nodemon --exec babel-nodesrc/server.js

cross-env:跨平台设置环境变量

nodemon：检视文件的改变并重新运行命令

 

同构：

html由服务器端渲染，交互由客户端完成

获取数据以及生命周期：getInitialProps在初始化组件props属时被调用，只在服务器端运行，没有跨域的限制。

                                       getInnitialProps不能用到子组件，只能用到页面组件上。

                                     属性；pathname query asPath req res