iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

Nuxt - 使用 Vue.js 做 SSR 的第一哩路 系列

SSR (Server-Side Rendering) 被視為前端工程師解決 SPA (Single-Page Application) SEO 問題的主要解法

本系列文將從一個簡單 Nuxt.js 專案建立講起,Nuxt.js 如何與現有 Vue.js SPA 整合,透過 SSR ,讓前端工程師也能處理 SEO 問題。甚至,做得更多。

鐵人鍊成 | 共 32 篇文章 | 155 人訂閱 訂閱系列文 RSS系列文 團隊InfoSec Horadrim
DAY 11

11. Nuxt 頁面驗證和錯誤顯示

接下來幾篇都屬頁面客製,這篇講「Nuxt 發生錯誤時,他怎麼判斷與反應」 先回顧這張流程圖 Nuxt 收到請求時,會經過這麼多步驟 而碰到不可預期的錯誤或頁面...

2018-10-26 ‧ 由 Ralph 分享
DAY 12

12. Nuxt 客製頁面效果 - 讀取(Loading)

這篇是頁面客製段落其二,主題講「Nuxt 頁面讀取效果如何調整」 用來補充頁面細部設定 讓我們回想錯誤頁面,是用來「呈現錯誤狀態的頁面元件」 而頁面渲染前,N...

2018-10-27 ‧ 由 Ralph 分享
DAY 13

13. Nuxt 客製頁面效果 - 轉場(Transition)

這篇是頁面客製段落其三,主題講「Nuxt 頁面轉場效果如何調整」 回憶兩種暫態 正在讀取中 => 讀取效果 (Loading) 頁面切換中 =>...

2018-10-28 ‧ 由 Ralph 分享
DAY 14

14. Nuxt 透過 asyncData 動態產生頁面內容

這篇主題講「Nuxt 如何用 asyncData 動態產生頁面內容」 用來補充頁面細部設定 asyncData 在執行順序中,排在頁面渲染(render)前,回...

2018-10-29 ‧ 由 Ralph 分享
DAY 15

15. Nuxt 透過 fetch 動態產生內容,並在 Client 使用

這篇主題講「Nuxt 如何用 fetch 動態產生頁面內容」 用來補充頁面細部設定 複習一下 Nuxt 收到請求後的處理流程 asyncData 和 fetc...

2018-10-30 ‧ 由 Ralph 分享
DAY 16

16. Nuxt 全域設定檔 (nuxt.config.js),可以吃嗎?

前幾篇提過頁面細部設定,對某一頁調 <head>、改 transition等細部調整。 有些調整,突然 PM 希望套用到整個網站,該怎麼辦?而前文介...

2018-10-31 ‧ 由 Ralph 分享
DAY 17

17. Nuxt 靜態資源 (Assets) 管理和引用

昨天有人問我引用圖片的路徑問題,答案整理成一篇補充雖說是圖片(image)、檔案(file)、樣式(css/scss/sass)、js等靜態資源,Nuxt 依其...

2018-11-01 ‧ 由 Ralph 分享
DAY 18

18. Nuxt 運行模式 (Mode) 差在哪?

這篇打算介紹 Nuxt 可運行模式與解決情境其中兩種靠調整設定,決定是否需要 Node Server Universal SPA 以及單純靜態頁 靜態頁產...

2018-11-02 ‧ 由 Ralph 分享
DAY 19

19. Nuxt Middleware,請求與回應間的中盤商

本篇要回溯「Nuxt 請求處理流程」,介紹 validate() 前一步驟 - Middleware Middleware 中文翻譯為 中介軟體、中間件、中介...

2018-11-03 ‧ 由 Ralph 分享
DAY 20

20. Nuxt `<nuxt-link>` 有什麼特別

根據 文件 所寫 就目前而言 &lt;nuxt-link&gt; 和 &lt;router-link&gt; 一樣 點擊功能太常用,身為工程師還是看個仔細實...

2018-11-04 ‧ 由 Ralph 分享