六月 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有以下幾個特點:

  1. Write Vue Files (*.vue) 每個.vue檔案為獨立的component,建立元件並進行管理

  2. Automatic Code Splitting 獨立打包不常被使用的程式碼,或依功能打包成模組,在需要特定功能時才載入對應的模組,提升網頁加載的速度

  3. Server-Side Rendering 在網站回應時即渲染出網頁畫面,提升使用者體驗

  4. Powerful Routing System with Asynchronous Data 不用手動配置路徑,只要在page底下建置檔案,即可自動完成路由,且不同的頁面路由下,能個別存取/處理數據

  5. Static File Serving 經由generate,可將網站編譯成靜態頁面,放置於伺服器上

  6. ES6/ES7 Transpilation Nuxt.js包含了Babel,可將.vue文件與內編寫的ES6/ES7編譯為可在瀏覽器上運行的JavaScript

  7. Bundling and minifying of your JS & CSS 自動打包與壓縮JS與CSS

  8. Managing element (, , etc.) 統一管理內容,例如、等

  9. Hot module replacement in Development 所有的編寫更動,頁面都會即時地自動刷新

  10. 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 Gamesplanet.training。點擊進行跳頁時,頁面不會出現一般跳頁等待的白畫面,且轉頁的速度極快。進一步檢視原始碼,你可看到一堆密密麻麻被壓縮過的程式碼,也可注意到檔案路徑 /_nuxt 是輸出靜態頁面後才有的路徑名稱。

結語

以Nuxt.js開發網站,最主要是提升網站開發的速度,在不用設定webpack、不用配置頁面路由,且支援Sass, pug等預處理器等工具的情況下,在開發時就能專注於改善使用者的體驗,也就是UI渲染,並將重複使用的區塊建立為component並靈活運用,發揮網站開發與維護的最大效益。

參考資料

  1. 官方文件
  2. 10 reasons to use Nuxt.js for your next web application
hashtags: