六月 20, 2018 | 前端與Vue

跟著HelloSanta玩轉NUXT前端應用框架

什麼是Nuxt.js？不只能幫你解決渲染問題、提供模板化開發、支援許多套件、壓縮工具以及預處理器，也不用再怕後續網站改版或擴增需求，所造成的重工問題！

什麼是Nuxt.js

Nuxt.js是基於Vue.js的SSR應用框架，那什麼是SSR呢？SSR的全名是Server Side Rendering，也就是伺服器渲染，即是客戶端請求網頁後，伺服器將網站全部解析完後，再回傳給客戶端的瀏覽器。也就是說網站所有的解析都由伺服器端來執行。對用戶的好處是網站開啟速度不會受到自身網速與設備的影響 ; 對開發人員來說，能夠使用模版來加速網站開發，也能夠同時兼顧SEO的操作。

那有伺服器渲染的話，相對於的就是CSR（Client-Side Rendering），客戶端渲染。簡單描述一下，CSR實現了前後端分離，是以Web API將資料呈現於頁面之上。前後端都能專心地進行各自的開發。好處在於前後端是分離，並不會互相影響，對於資訊呈現也能更靈活地應用，與用戶有較好的互動。不過，也因為是透過DOM將資料插入html的關係，會受到用戶網速與設備影響，相對也不利於SEO。

SSR與CSR各有各的好處與要考量的部分。若您有興趣，可以參考此篇：Client-side vs. server-side rendering: why it’s not all black and white

此篇的目的在於讓你認識Nuxt.js，它幫你解決渲染問題、提供模板化開發、支援許多套件、壓縮工具以及預處理器。不用再怕後續網站改版或擴增需求，所造成的重工問題！

Nuxt.js的特點

根據官網所寫，Nuxt.js有以下幾個特點：

Write Vue Files (*.vue) 每個.vue檔案為獨立的component，建立元件並進行管理
Automatic Code Splitting 獨立打包不常被使用的程式碼，或依功能打包成模組，在需要特定功能時才載入對應的模組，提升網頁加載的速度
Server-Side Rendering 在網站回應時即渲染出網頁畫面，提升使用者體驗
Powerful Routing System with Asynchronous Data 不用手動配置路徑，只要在page底下建置檔案，即可自動完成路由，且不同的頁面路由下，能個別存取/處理數據
Static File Serving 經由generate，可將網站編譯成靜態頁面，放置於伺服器上
ES6/ES7 Transpilation Nuxt.js包含了Babel，可將.vue文件與內編寫的ES6/ES7編譯為可在瀏覽器上運行的JavaScript
Bundling and minifying of your JS & CSS 自動打包與壓縮JS與CSS
Managing element (, , etc.) 統一管理內容，例如、等
Hot module replacement in Development 所有的編寫更動，頁面都會即時地自動刷新
Pre-processor: Sass, Less, Stylus, etc. 支援預處理器的使用，如Sass, Less, Stylus等

總結來說，Nuxt.js 整合了 Vue, webpack 和 Node.js，支援plugin與其它工具，如：Sass、Pug等（依需求自行安裝），不需要配置路由，也不用設定webpack，即可以最輕鬆的方式製作出SSR的Web應用。

目前應用Nuxt.js的案例

目前應用Nuxt.js的網站，例如 GameVix: Swap Video Games 與 planet.training。點擊進行跳頁時，頁面不會出現一般跳頁等待的白畫面，且轉頁的速度極快。進一步檢視原始碼，你可看到一堆密密麻麻被壓縮過的程式碼，也可注意到檔案路徑 /_nuxt 是輸出靜態頁面後才有的路徑名稱。