Vue.js 是建構用戶端應用程式的架構。預設情況下，可以在浏覽器中輸出 Vue 元件，進行生成 DOM 和操作 DOM。然而，也可以将同一個元件渲染為伺服器端的 HTML 字元串，将它們直接發送到浏覽器，最後将這些靜态标記"激活"為用戶端上完全可互動的應用程式。在服務端渲染模闆字元串的這一過程即為SSR。
概要
何時使用伺服器端渲染 (SSR) （來自vue官方文檔）
與傳統 SPA (單頁應用程式 (Single-Page Application)) 相比，伺服器端渲染 (SSR) 的優勢主要在于：
更好的 SEO，由于搜尋引擎爬蟲抓取工具可以直接檢視完全渲染的頁面。
請注意，截至目前，Google 和 Bing 可以很好對同步 JavaScript 應用程式進行索引。在這裡，同步是關鍵。如果你的應用程式初始展示 loading 菊花圖，然後通過 Ajax 擷取内容，抓取工具并不會等待異步完成後再行抓取頁面内容。也就是說，如果 SEO 對你的站點至關重要，而你的頁面又是異步擷取内容，則你可能需要伺服器端渲染(SSR)解決此問題。
更快的内容到達時間 (time-to-content)，特别是對于緩慢的網絡情況或運作緩慢的裝置。無需等待所有的 JavaScript 都完成下載下傳并執行，才顯示伺服器渲染的标記，是以你的使用者将會更快速地看到完整渲染的頁面。通常可以産生更好的使用者體驗，并且對于那些「内容到達時間(time-to-content) 與轉化率直接相關」的應用程式而言，伺服器端渲染 (SSR) 至關重要。
使用伺服器端渲染 (SSR) 時還需要有一些權衡之處：
開發條件所限。浏覽器特定的代碼，隻能在某些生命周期鈎子函數 (lifecycle hook) 中使用；一些外部擴充庫 (external library) 可能需要特殊處理，才能在伺服器渲染應用程式中運作。
涉及建構設定和部署的更多要求。與可以部署在任何靜态檔案伺服器上的完全靜态單頁面應用程式 (SPA) 不同，伺服器渲染應用程式，需要處于 Node.js server 運作環境。
更多的伺服器端負載。在 Node.js 中渲染完整的應用程式，顯然會比僅僅提供靜态檔案的 server 更加大量占用 CPU 資源 (CPU-intensive - CPU 密集)，是以如果你預料在高流量環境 (high traffic) 下使用，請準備相應的伺服器負載，并明智地采用緩存政策。
在對你的應用程式使用伺服器端渲染 (SSR) 之前，你應該問的第一個問題是，是否真的需要它。這主要取決于内容到達時間 (time-to-content) 對應用程式的重要程度。例如，如果你正在建構一個内部儀表盤，初始加載時的額外幾百毫秒并不重要，這種情況下去使用伺服器端渲染 (SSR) 将是一個小題大作之舉。然而，内容到達時間 (time-to-content) 要求是絕對關鍵的名額，在這種情況下，伺服器端渲染 (SSR) 可以幫助你實作最佳的初始加載性能。
SSR的原理
通過如下的原理圖我們可以分析出SSR的基本原理：
左側Source部分就是我們編寫的源代碼，所有代碼有一個公共入口，即app.js，與app.js右側相鄰的就是服務端的入口
（entry-server.js）和用戶端的入口（entry-client.js）。當完成所有源代碼的編寫之後，我們通過webpack打包出兩個bundle，分别是server bundle和client bundle，當使用者進行頁面通路的時候，先是經過服務端的入口，将vue元件組裝為html字元串，并混入用戶端所通路的html模闆中，最終就完成了整個SSR渲染的過程。
建立SSR demo
建立一個項目目錄為vue-ssr-demo， 進入目錄，輸入如下指令：
安裝完成後，可以看到我們的package.json檔案如下：
在根目錄下（vue-ssr-demo）建立一個server.js檔案，使用者建立node服務
在package.json檔案中添加啟動node服務的指令
在vscode終端輸入 npm run server 可以看到服務已啟動的提示語，在浏覽器位址欄輸入localhost:5000，可以看到頁面顯示<code>Hell SSR</code>。
上面我們成功渲染出一段文字，下面我們去渲染一個html模闆。
修改server.js檔案如下：
儲存代碼，重新開機服務npm run server，然後重新重新整理頁面， 可以看到渲染的文字為<code>這是模闆消息：Hello SSR</code>。
浏覽器按F12檢視頁面源代碼，我們發現在源代碼中，已經存在一個标簽h1，同時，h1标簽上面有一個屬性：data-server-rendered="true"，這其實是一個标記，表明這個頁面是由vue-ssr渲染而來的。
雖然h1标簽對被成功渲染，但是我們發現這個html頁面并不完整， 缺少文檔聲明,html标簽，body标簽，title标簽等。
當你在渲染 Vue 應用程式時，renderer 隻從應用程式生成 HTML 标記 (markup)。我們必須用一個額外的 HTML 頁面包裹容器，來包裹生成的 HTML 标記。
為了簡化這些，你可以直接在建立 renderer 時提供一個頁面模闆。多數時候，我們會将頁面模闆放在特有的檔案中，例如 index.template.html：
注意 <code><!--vue-ssr-outlet--> </code>注釋 -- 這裡将是應用程式 HTML 标記注入的地方。
然後，我們可以讀取和傳輸檔案到 Vue renderer 中，修改server.js
重新啟動node服務，重新整理頁面，按下F12，這時我們可以看到完整的html結構