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