通用應用框架 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.