一, 前言
C 端项目重构成首屏服务端渲染 (SSR:serve side render), 对于重构成 SSR,redux 不是必须的. 本文以 vue 为栗子的项目.
二, 什么是服务端渲染
将组件或页面通过服务器生成 html 字符串, 再发送到浏览器, 最后将静态标记 "混合" 为客户端上完全交互的应用程序.
我以 weekly 周报 http://weekly.mwcxs.top/ 的登陆页面为例
登陆页没有使用服务端渲染, 请求到 login 页面, 返回的 body 为空, 之后执行 JS 将 HTML 结构注入到 body 中, 结合 CSS 显示出来
我的另外一个 vue 的 nuxt 写的 ssr 渲染的 songEagle http://www.chengxinsong.cn/ , 首页返回的 body 是带有 HTML 的.
三, SSR 渲染和客户端渲染的区别
1,SSR 渲染的优势:
(1) 更利于 SEO;
(2) 更利于首屏渲染 (特别是对于缓慢的网络情况或运行缓慢的设备, 内容更快到达)
2,SSR 渲染的缺点:
(1) 服务器压力大, 考虑服务器端负载.
(2) 开发条件受限, 只会执行到 ComponentMount 之前的生命周期钩子, 引用第三方库不可用其他生命周期钩子, 引用库选择产生很大的限制.
(3) 学习成本增大, 需要学习构建设置和部署的更多要求.
四, 耗时比较
1, 数据请求
由服务端请求首屏数据, 而不是客户端请求首屏数据, 这是 "快" 的一个主要原因. 服务端在内网进行请求, 数据响应速度快. 客户端在不同网络环境进行数据请求, 且外网 http 请求开销大, 导致时间差.
2,HTML 渲染
服务端渲染是先向后端服务器请求数据, 然后生成完整首屏 HTML 返回给浏览器;
而客户端渲染是等 JS 代码下载, 加载, 解析完成后再请求数据渲染, 等待的过程页面是什么都没有的, 就是用户看到的白屏.
就是服务端渲染不需要等待 JS 代码下载完成并请求数据, 就可以返回一个已有完整数据的首屏页面.
五, 原理
相对于 SPA,vue 增加了一些扩展工具, 首先我们来看一下比较重要的一个工具 vue-server-renderer, 从名字就知道是在服务端渲染时候调用的
具体实现:
1, 创建一个空项目 mkdir vuessr && cd vuessr
2, 运行 NPM init 进行初始化
3, 安装我们需要的依赖 cnpm install vue vue-server-renderer --save
4, 创建 index.JS 代码如下:
- // 第 1 步: 创建一个 Vue 实例
- const Vue = require('vue')
- const App = new Vue({
- template: `<div>Hello World</div>`
- })
- // 第 2 步: 创建一个 renderer
- const renderer = require('vue-server-renderer').createRenderer()
- // 第 3 步: 将 Vue 实例渲染为 HTML
- renderer.renderToString(App, (err, HTML) => {
- if (err) throw err
- console.log(HTML)
- // => <div data-server-rendered="true">Hello World</div>
- })
5, 运行 node index.JS 可以看到在控制台输出了
<div data-server-rendered="true">Hello World</div>
六, 总结
什么是 SSR? 将组件或页面通过服务器生成 HTML 字符串, 再发送到浏览器, 最后将静态标记 "混合" 为客户端上完全交互的应用程序. SSR 有更利于 SEO 和首屏渲染, 同时也有缺点: 服务器压力大, 开发条件受限, 只会执行 ComponentMount 之前的生命周期, 第三库使用受限, 学习成本大. 原理是靠 vue-server-renderer 这个库的 createRenderer(), 然后调用 rendererToString().
[谢谢关注和阅读, 后续新的文章首发: sau 交流学习社区: https://www.mwcxs.top/ ]
来源: https://www.cnblogs.com/chengxs/p/11046599.html