通用應用框架 Vue Nuxt
📋 目錄
CSR & SSR
CSR(Client Side Rendering) 客戶端繪製
在客戶端用資料繪製出 HTML / CSS 等內容再塞進 DOM 裡面呈現畫面
SSR(Server-Side Rendering) 伺服器繪製
頁面由後端渲染，HTML由後端產生
為了提升維護性
切開畫面與資料邏輯，後端完全 API 化，渲染完全靠前端
演變成現今熟悉的單頁式應用 SPA，純粹 Client-Side Rendering
移到前端渲染，跟著出現新的問題：
- SEO (Search Engine Optimization)
- SMO (Social Media Optimization)
- 起始延遲 (Initial Latency) / 起始讀取時間 (Initial Load Time)
畢竟得等 js 讀完跑完，抓完API再渲染完
Vue Nuxt 介紹
🌻 使用 Nuxt 的好處
- 寫 Vue File 就好，簡單
- 幫你做代碼分離
- 幫你做 SSR
- 路由幫你處理掉非同步資料抓取
- 也可以當成靜態站
- 幫你做 ES6/ES7 轉譯
- 打包並最小化 JS & CSS
- 幫你生 Head Meta
- 本地開發熱加載
- 支援 ESLint
- 樣式語法支援 SASS、LESS、 Stylus
- 支援 HTTP/2 headers
- 已留模組架構，供你自行擴充
為已建好的 Vue 專案添加 SSR (Nuxt)
1.安裝 nuxt
2.新增 nuxt 命令 (package.json)
3.建立 pages 頁面 (pages/index.vue)
4.依 SPA Vue-Router 定義路由，把元件 vue file 依相同規則搬進 /pages
5.測試專案正常運作 http://localhost:3000
(下指令 npm run dev)
Nuxt 專案結構介紹
- assets: 放需要 webpack 編譯的靜態資源
- static: 不需要編譯的靜態資源
- pages: 各頁對應的頁面元件 (相當於你寫 SPA 時，VueRouter路由指定的元件)
- components: 跨頁面的元件，不具狀態
- nuxt.config.js: Nuxt 全域設定檔
- .nuxt: Nuxt 暫存資料夾
[實作]便當小專案開發記錄
🔎 Unbox it: https://jacychutw.github.io/vue-nuxt-Bento/
綠光便當盒首頁如上圖，點選進去前可以按 F12 檢視網頁原始碼觀察<body>裡面不像使用 SPA 所建立的網站只是空空的容器，裡面是完整的內容。這也是 SSR 對 SEO 比較好的原因，爬蟲可以查找。
點 Unbox 按鈕，進入第二個頁面，這邊有多種顏色的便當袋會隨機出現。
再點一次 Unbox 按鈕，提供 66 種不同內容。可能抽到各樣的美食，也可能出現意想不到的內容！
開發過程中，發現圖案的 render 部分有需要藉由 require 搭配變數去取。
小結
筆者用一個小專案練習實作 Nuxt。附上 GitHub 檔案連結 🔗 ，專案資料夾名稱：vue-nuxt-Bento。Nuxt 框架協助在伺服器上呈現全部或是一部分的內容，改進 SPA 網站的 SEO問題。此外，在開發上 Nuxt.js 框架讓各種設定簡化，程式開發人員可以較輕鬆地開發應用程式。
🍱 Let’s open the bento box.
