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

时间 2019-11-17

标签基于 vue 服务器渲染 ssr 繁體版

原文原文链接

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

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

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

什么是前端渲染

以VUE为例，咱们查看生产环境的页面的html源码，会获得以下的样子：前端

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue</title>
</head>
<body>
  <div id="app"></div>
  <script type="text/javascript" src="xxxx.xxx.js"></script>
  <script type="text/javascript" src="yyyy.yyy.js"></script>
  <script type="text/javascript" src="zzzz.zzz.js"></script>
</body>
</html>
复制代码

其实，这个就是浏览器从服务器端拿到的html。这里只有空的 <div id="app"></div> 入口，以及一系列的js。其实，咱们看到的页面就是由这些js渲染出来的，这就是 前端渲染vue

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。
优势：设置简单，并能够将前端做为彻底静态的站点。

参考连接：java