2020年6月19日,NuxtJS 發布 v2.13.0
2020年7月28日,NuxtJS 發布 v2.14.0
要開發 SEO 的靜態網站,又想享受框架開發的舒適,於是選擇 Nuxt,可用來生成靜態站總還是有些蹩腳,比如默認不支持動態路由等。
這兩個次版本的發布,終於讓 Nuxt 開發靜態網站方便多了!
先說亮眼新特性:
- v2.13 增加了
target: 'static'
配置,搭配指令nuxt export
來生成完全靜態的網站。- v2.14 用
nuxt generate
指令取代了nuxt export
,后者曇花一現退出 nuxt 舞台。- 可以處理動態路由了,無需另外
generate.routes
指定了。- 更智能的
nuxt generate
,webpack 會跳過沒有變化的文件,大大縮減了生成的時間。- 更智能的
nuxt start
,generate 之后,可以使用nuxt start
在本地運行生成的靜態應用,用來進行部署前的測試,並且支持 SPA Fallback。
可以處理動態路由
和 nuxt start
真是太棒了。
target: 'static'
+ nuxt generate
生成的【完全靜態】的應用又是什么意思呢?與之前 generate 生成的靜態應用有什么區別?
我們先來看一下 Nuxt 官網的一張圖,闡述了 Nuxt.js 應用一個完整的服務器請求到渲染(或用戶通 <nuxt-link>
切換路由渲染頁面)的流程
可以看到,在 SSR 中,服務端會執行 asyncData()
和 fetch()
,用來訪問接口生成數據,從而在服務端就渲染出頁面內容。
那么,在 generate 生成的靜態應用中會怎樣呢?如我們預料,生成的 dist 中的 html,就是執行過 asyncData()
和 fetch()
的有數據內容的文件了。
但是,當我們切換路由的時候,這兩個函數又被調用了一遍,如果其中有接口調用,就會再次請求接口,拿回來最新的數據。問題是,這讓頁面切換變慢,而許多靜態網站並不需要請求最新的數據。
於是,【完全靜態】的應用就被千呼萬喚召喚出來了,它的接口請求的數據定格在 generate 的時候,部署后不會再通過 asyncData()
和 fetch()
調用 API 了。這使得頁面切換變得非常快。
可是,對於某些頁面,我還想要最新的數據,怎么辦呢?別擔心,新版的 nuxt 還很貼心地支持了 Preview mode
:
// plugins/preview.client.js
export default async function ({ query, enablePreview }) {
if (query.preview) {
enablePreview()
}
}
添加這個插件,然后在需要更新數據的頁面 url 后面加上 ?preview=1
就可以做到了。