（十七）nuxt.js 簡述 客戶端渲染 服務端渲染 簡介
nuxt.js 簡述
偶然間看見了這個東西 記錄一下 順便理解一下相關於 前端解析 部署 渲染啥的的流程
vue單頁面應用渲染是從伺服器獲取所需js，在客戶端將其解析生成html掛載於
id為app的DOM元素上，這樣會存在兩大問題。
什麼是nuxt.js
Nuxt.js 是一個基於Vue.js的通用應用框架，預設了利用Vue.js開發服務端渲染的應用所需要的各種配置。可以將html在服務端渲染，合成完整的html檔案再輸出到瀏覽器。
nuxt是關於服務端渲染的，如若想讓元件在客戶端渲染，可以使用
這樣在未獲取到內容時，頁面先採用<div class="no-ssr-placeholder" data-v-2a183b29=""></div>
和vue的區別 （具體使用得寫流程）
-
路由
nuxt按照 pages 資料夾的目錄結構自動生成路由
vue需在 src/router/index.js 手動配置路由 -
入口頁面
nuxt頁面入口為 layouts/default.vue
vue頁面入口為 src/App.vue -
webpack配置
nuxt內建webpack，允許根據服務端需求，在 nuxt.config.js 中的build屬性自定義構建webpack的配置，覆蓋預設配置
vue關於webpack的配置存放在build資料夾下
服務端渲染 （SSR)
- 概念： 就是將資料和模板組裝成 html
- 解釋一：服務端在返回 html 之前，在特定的區域，符號裡用資料填充，再給客戶端，客戶端只負責解析 HTML
- 解釋二：服務端渲染的模式下，當用戶第一次請求頁面時，由伺服器把需要的元件或頁面渲染成 HTML 字串，然後把它返回給客戶端。客戶端拿到手的，是可以直接渲染然後呈現給使用者的 HTML 內容，不需要為了生成 DOM 內容自己再去跑一遍 JS 程式碼。使用服務端渲染的網站，可以說是“所見即所得”，頁面上呈現的內容，我們在 html 原始檔裡也能找到。
優點：
首屏渲染快、利於SEO、可以生成快取片段，生成靜態化檔案、節能（對比客戶端渲染的耗電）
缺點：
使用者體驗較差、不容易維護，通常前端改了部分html或者css，後端也需要修改。
客戶端渲染 （CSR)
- 解釋： 客戶端渲染模式下，服務端把渲染的靜態檔案給到客戶端，客戶端拿到服務端傳送過來的檔案自己跑一遍js，根據JS執行結果，生成相應DOM，然後渲染給使用者。
- 解釋： html 僅僅作為靜態檔案，客戶端在請求時，服務端不做任何處理，直接以原檔案的形式返回給客戶端客戶端，然後根據 html 上的 JavaScript，生成 DOM 插入 html。
優缺點：
好處：
網路傳輸資料量小、減少了伺服器壓力、前後端分離、區域性重新整理，無需每次請求完整頁面、互動好可實現各種效果
壞處：
不利於SEO、爬蟲看不到完整的程式原始碼、首屏渲染慢（渲染前需要下載一堆js和css等）
VS
其實前後端的渲染本質是一樣的，都是字串的拼接，將資料渲染進一些固定格式的html程式碼中形成最終的html展示在使用者頁面上。 因為字串的拼接必然會損耗一些效能資源。
如果在伺服器端渲染，那麼消耗的就是server端的效能。
如果是在客戶端渲染，常見的手段，比如是直接生成DOM插入到html 中，或者是使用一些前端的模板引擎等。他們初次渲染的原理大多是將原html中的資料標記（例如{{text}}）替換。
使用服務端的優勢
事實上，很多網站是出於效益的考慮才啟用服務端渲染，效能倒是在其次。
假設 A 網站頁面中有一個關鍵字叫“前端效能優化”，這個關鍵字是 JS 程式碼跑過一遍後新增到 HTML 頁面中的。那麼客戶端渲染模式下，我們在搜尋引擎搜尋這個關鍵字，是找不到 A 網站的——搜尋引擎只會查詢現成的內容，不會幫你跑 JS 程式碼。A 網站的運營方見此情形，感到很頭大：搜尋引擎搜不出來，使用者找不到我們，誰還會用我的網站呢？為了把“現成的內容”拿給搜尋引擎看，A 網站不得不啟用服務端渲染。
但效能在其次，不代表性能不重要。服務端渲染解決了一個非常關鍵的效能問題——首屏載入速度過慢。在客戶端渲染模式下，我們除了載入 HTML，還要等渲染所需的這部分 JS 載入完，之後還得把這部分 JS 在瀏覽器上再跑一遍。這一切都是發生在使用者點選了我們的連結之後的事情，在這個過程結束之前，使用者始終見不到我們網頁的廬山真面目，也就是說使用者一直在等！相比之下，服務端渲染模式下，伺服器給到客戶端的已經是一個直接可以拿來呈現給使用者的網頁，中間環節早在服務端就幫我們做掉了，使用者豈不“美滋滋”？
通過服務端渲染的概念以及它的兩個特點：首屏載入速度快、SEO優化。
我們知道，服務端渲染其實就是由瀏覽器做的一些事情，我們放到了服務端去做，那麼對於掘金、簡書、CSDN、知乎等網站的搭建，這種在網上一搜搜出一堆東西的網站，SEO做的很好，應該多少都用到服務端渲染了吧？當然，做服務端渲染成本是高昂的。
vue全家桶或者react全家桶，都是推薦通過服務端渲染來實現路由的。
服務端渲染並非完全之策（伺服器稀少而寶貴），關於首屏渲染體驗以及SEO的優化方案很多，在不使用服務端渲染這個操作下，我們最好的處理方式就是找尋替代優化方案。
關於在server端還是在browser端渲染的選擇，更多的是要看業務場景。
為什麼現在又流行伺服器端渲染html？https://blog.csdn.net/b9q8e64lo6mm/article/details/79418969