起因
將整個部落格用 Nuxt 重構完成之後我發現首頁訪問速度還是不盡人意，白屏時間確實大大縮短，但是背景出現到最近文章出現這中間還是有比較長的一段時間，
也就是說第一次網路請求比較慢，那有沒有辦法解決呢，首先我就想到使用 「CDN」。
CDN 加速
CDN 的全稱為內容分發網路，通俗的來說就是把網站內容給複製到全國各個地方的節點上去，使用者訪問就從最近的節點拿，於是用騰訊雲將我的網站新增進了騰訊雲的 CDN 。但是訪問速度並沒有肉眼可見的提升，這是為什麼呢，我進行了一番思考。
制約我網站首頁載入速度的已經不是首頁白屏了，而是第一次請求最近文章，即使使用了 CDN 提升了開啟網站的速度，但是瀏覽器得到網頁之後請求最近文章還是受制於我的伺服器，既然這樣的話能不能把最近文章在伺服器端渲染好然後再一起瀏覽器，兩次請求就變為了一次，相當於首頁就變成了靜態頁面，CDN 也能夠快取到最近文章資料。
二話不說開始翻文件，果然主打服務端渲染的 Nuxt 擴充套件了 Vue.js，增加了一個叫 「asyncData」 的方法，使得我們可以在設定元件的資料之前能非同步獲取或處理資料。
使用 asyncData 方法
通俗來講就是這個方法裡的函式會在伺服器裡面的時候就被呼叫，而不是在使用者瀏覽器中才被呼叫。這樣就達到了上文所說的那種效果，第一次返回網頁就已經包括了最近文章資料，程式碼如下
async asyncData({ $axios }) {
try {
let { data } = await $axios.post("/recent"); //有誤
return { list: data.data };
} catch (e) {
console.log(e);
}
},複製程式碼按照道理來說現在首頁訪問速度應該快如閃電了吧，行雲流水的部署，卻發現首頁根本沒有載入出來資料，看控制檯也沒有報錯，咋回事？沒用嗎，這個請求放在 methods 是完全沒問題的啊。於是開始了漫長的排錯之旅。
Axios 在 asyncData 方法中使用問題
試著用 try 捕捉了一下錯誤，發現這段程式碼是在服務端就被執行了，所以列印和報錯資訊都在後端顯示，怪不得瀏覽器中一切安好。列印報錯資訊又被請求體中返回的網站原始碼覆蓋看不到報錯資訊，找遍了百度也沒有類似的解決方案，又上 Google 搜尋 axios 在 asyncData 中的報錯，倒是有幾個，解決方法是重新定義一份 Axios 配置檔案，試過之後還是無濟於事。
到這裡我就隱約感覺到應該是 axios 的配置有問題，可能是和這段函式是在伺服器執行有關。斷斷續續被折磨了幾天後決定還是想辦法看報錯資訊，於是用手機連拍功能，在報錯資訊刷出來的一瞬間拍下來了，發現竟然是 404 錯誤。這怎麼可能，檢視請求體中 request 的網址是 http://127.0.0.1:3002/recent 這就很奇怪了，我的 axios 是設定了 browserBaseURL 是 /api 的，正確的請求地址應該是 http://127.0.0.1:3002/api/recent，不知道為什麼 asyncData 中的請求卻沒有新增上這個字首，果然是這個請求沒有使用全域性的配置檔案，限於技術水平我也就沒有對這個問題進行深挖，直接加上了 /api， 果然好使了。改動後程式碼：
async asyncData({ $axios }) {
try {
let { data } = await $axios.post("/api/recent");
return { list: data.data };
} catch (e) {
console.log(e);
}
},複製程式碼順便提一句，這個方法只有在頁面元件中才能用，也就是 Page 目錄下的 vue 檔案，元件目錄中的 vue 檔案是沒有這個方法的，剛開始我就一直在自我懷疑是不是這個不能用.....
上傳部署一氣呵成，別忘了重新整理一次 CDN 快取，開啟網站，果然！很快，肉眼可見的速度提升了。開啟控制檯看一下具體的載入時間
網頁所有的資訊都在100毫秒內就展示出來了，飛一般的感覺，至此首頁訪問速度優化告一段落，因為首頁也沒得圖片，這種速度也是應該的， Nuxt 好使！
Welcome to my Blog