快來用 Nuxt 開發靜態網站


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> 切換路由渲染頁面)的流程

nuxt 服務器請求到渲染的過程

可以看到,在 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 就可以做到了。


參考

Going Full Static
NuxtJS 官方文檔


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM