基於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不友好