基于VUE的服务器端渲染（SSR）

什么是服务器端渲染（SSR）

服务器端渲染(以下称为SSR)：网页通常是通过后端路由直接给客户端的。也就是说网页的html一般是后端服务器里通过模板引擎渲染好后再交给前端的。

对于其他的效果，则是由预先写在页面里的jq，bootstrap等常见的前端框架去完成的。

---

什么是前端渲染

以VUE为例，我们查看生产环境的页面的html源码，会得到如下的样子：

"en">

  "UTF-8">
  


  
"app">
  
  
  


复制代码

其实，这个就是浏览器从服务器端拿到的html。这里只有空的

入口，以及一系列的js。其实，我们看到的页面就是由这些js渲染出来的，这就是 前端渲染

---

SSR VS 前端渲染

名称	SSR	前端渲染
优点	有利于SEO 对安全性要求高的页面采用SSR更保险	很大程度上缓解了服务器端的压力 可以做到无缝的页面切换体验
缺点	耦合性太强 jq时代的页面不好维护 切换页面出现白屏等	SEO不友好

---

为什么要用SSR

• 更好的 SEO, 由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
• 更快的内容到达时间（time-to-content）,特别是对于缓慢的网咯情况或运行缓慢的设备。无需等待所有的JavaScript

---

使用SSR需要权衡之处

• 开发条件限制。一些浏览器特定的代码，只有在生命周期的某些钩子函数中使用；一些外部扩展库，可能需要特殊处理，才能在服务器端渲染程序中运行。
• 涉及构建和部署的更多要求。SSR需要处于Node.js Server运行环境。
• 更多的服务器端负载。

---

什么时候使用SSR

• 主要取决于内容到达时间（time-to-content）对应用的重要程度。当内容到达时间（time-to-content）要求是绝对关键的指标时，就可以用SSR来实现最佳的初始加载性能。

---

SSR VS 预渲染

• 预渲染： 无需使用web服务器动态编译HTML，在构建事简单的生成针对特定的路由的静态HTML文件
• 何时使用预渲染：只是用于改善少数营销页面的SEO。
• 优点：设置简单，并可以将前端作为完全静态的站点。

---

怎么用SSR

---

参考链接：

• Vue.js 服务器端渲染指南
• 浅谈前后端路由与前后端渲染