Waiting7777 - NuxtJS -- Going Full Static (中翻)

NuxtJS -- Going Full Static (中翻)

2020-06-22

Engineering

5 MIN

這是一篇 NuxtJS 部落格文章的中文翻譯，藉由將文件翻譯的過程，順便更加了解文章的內容以及 NuxtJS 的熟悉度。

Too long to read

Upgrade nuxt to 2.13.0
Set target: 'static' in your nuxt.config.js
Run nuxt build && nuxt export instead of nuxt generate
That's it ✨

Bonus: 你可以用 nuxt serve 來跑個本地 server 測試你生出來的靜態頁面。

Too long to read
Table of Contents
History
Current issues
New config option: target
New command: nuxt export
New command: nuxt serve
Preview mode
Commands
Notes
- What to do next

History

Nuxt 從 v0.3.2(November 2016)就有了靜態網站產生指令 nuxt generate，從那之後也做了很多改進，但一直沒有達到完全的靜態產生，今天 (Nuxt 2.13) 終於誕生了完全靜態的 export 指令。

Current issues

nuxt generate 大部分都是 pre-rendering，當你瀏覽用戶端時，asyncData 和 fetch 會被呼叫, 對你的 API 產生一個 request. 而很多用戶都要求希望有 "full static" 模式。希望這兩個 hook 可以不要被呼叫，因為你的頁面的內容都已經 pre-rendered 了。

此外，開發經驗也沒最佳化:

你在 SSR 模式可以訪問 req 或 res，但是在 nuxt generate 時卻沒有。
只有在 nuxt generate 時 process.static 才是 true，使得開發 Nuxt 模組或是外掛的困擾。
在 gererate.routes 中你必須自己指定全部的 dynamic routes，這非常的困難因為你無法造訪 nuxt module。
在開發模式中你無法測試 SPA fallback。
nuxt generate 預設會跑 nuxt build，使得網站只有更新內容的時候也要花費過長的 gernerate 時間。

附記：你也可以用 nuxt-payload-extractor 模組來達成，但有一點麻煩以及一些限制。

New config option:`target`

為了改進如何告訴 Nuxt 想要將你的應用生成靜態網頁，我們介紹一個放在 nuxt.config.js 的屬性 target:

export default {
    target: 'static'
}

在有 static target 的時候用 nuxt dev 也能使開發經驗獲得改善:

從 context 中移除 req & res
從 404 中退回 (see SPA fallback)
$route.query 在 SSR 時永遠等於 {}
process.static is true

我們也將 process.target 暴露出來給模組的的作者來做邏輯上的使用。

*譯者註: 第4點真的蠻好用的，原本用 process.static 當邏輯做點 UI 的調整，要等 nuxt generate 出來以後才能知道結果，整個開發的很卡。

New command:`nuxt export`

為了避免破壞過去的 nuxt generate，我們使用了新的指令 nuxt export: 將你的 Nuxt app export 成靜態 HTML 到 dist/ 資料夾裡。

⚠️ 你得先跑 nuxt build 才能用 nuxt export

Crazy fast static applications

nuxt export 會 pre-render 你全部的頁面成 HTML 並且把 asyncData 和 fetch hook 裡面的資料存起來，讓之後用戶使用，意思就是 在用戶端不再會有 API 呼叫。並且把頁面的 payload 轉換成 js 檔案，更可以有效的減少檔案大小。

我們同時也改進了 smart prefetching，在純靜態時可以讓瀏覽切換近乎瞬間👀

Crawler integrated

nuxt 同時有爬蟲在裡面，偵測每個相關 route 並產生並產生頁面。如果你想要把很多 route 排除可以用 generate.exclude。你可以繼續使用 generate.routes 來新增額外的 route 並且不會生出靜態頁面。

想要取消爬蟲，在 nuxt.config.js 設定 generate.crawler: false

Faster re-deploy

在將 nuxt build 以及 nuxt export 分開之後，我們就可以實作一個新的優化，只 pre-render 內容有改變的頁面，這代表 no Webpack build -> 快速重新部署

New command: nuxt serve

當你把靜態頁面產出在 dist/後，可以在該資料夾使用 nuxt serve開啟一個 production 並支援 SPA fallback 的 server

這指令可以讓你在將靜態內容上傳到雲端前檢查頁面。

Preview mode

我們也支援實時預覽，只要加裝額外的 plugin:

// plugins/preview.client.js
export default async function ({ query, enablePreview }) {
    if (query.preview) {
        enablePreview()
    }
}

開發時這將會自動重整頁面，(nuxtServerInit，asyncData 和 fetch 將會被呼叫)

Commands

現在你可以根據 target 跑一些不同的指令

server
- nuxt dev 開啟開發 server
- nuxt build 將 Nuxt app 打包
- nuxt start 開始 production server
static
- nuxt dev 開啟開發 server (包含前面提的靜態改動)
- nuxt build 將 Nuxt app 打包 (包含前面提的靜態改動)
- nuxt export 將靜態頁面產生到 dist/
- nuxt serve 從dist/ 開始 production server