Nuxt.js是一個建立在Vue.js上的前端框架，它提供了很好的開發特性，比如服務器端渲染、自動生成路由、改進的元標籤管理和SEO改進。
Nuxt.js
我們的前端團隊並沒有真正考慮在客戶端使用 Nuxt.js 作為主要技術，直到最近我們收到了一個獨特項目的請求，該項目有許多非常具體的特性。因為這也是我們團隊中的幾個成員第一次使用Nuxt.js，所以我決定寫這個博客來解釋它對我們的工作方式。
為什麼在Vue上使用Nuxt.js？
Nuxt.js為前端開發人員提供了許多好處，但是有一項關鍵功能使我們最終決定使用此框架——SEO改進。我們的應用程序需要此功能，因為它不是典型的內部SPA（單頁應用程序）。這是一個包含社交共享功能和管理功能的公共網絡應用程序。
說到社交共享，Nuxt.js有很好的元標籤管理，所以我們可以根據後端接收的數據輕鬆地創建特定的、可定製的社交共享窗口。
那麼，SEO改進如何工作？
為了改善SEO，Nuxt.js使用SSR（服務器端渲染）。SSR在獲取AJAX數據後將Vue.js組件渲染為服務器（Node.js）上的HTML字符串。完成所有異步邏輯後，它將它們直接發送到瀏覽器，然後最終將靜態標記提供給客戶端上的完全交互式應用程序。此功能允許使用Google SEO解析器很好地解析DOM元素。 SEO解析器在加載網站DOM時立即以巨大的速度解析DOM元素。
另一方面，典型的SPA應用程序是用Vue這樣的框架構建的 Vue.js、React、Angular等都是在DOM加載後用AJAX從後端獲取數據，因此SEO解析器無法解析所有的DOM元素，因為它們還沒有渲染。AJAX提取是異步的，而SEO解析則不是。
Nuxt.js需要與Vue不同的心態
Nuxt.js和Vue.js處理邏輯的方式非常不同。主要區別在於Vue始終在客戶端運行，而Nuxt不在客戶端運行，這在某些情況下可能會導致重大問題。例如，如果您想在加載應用程序後立即選擇DOM元素，則該應用程序可能在Node.js端運行，當然，Node.js中沒有DOM元素。
訪問瀏覽器的本地存儲時也會發生同樣的情況。這就是Nuxt在本地存儲上使用cookie的主要原因——因為它們始終可以訪問。
有了Vue，我們就不會遇到這類問題，因為它總是在客戶端上運行，因此我們不必理會這些潛在的問題。
讓我們看看如何在Vue中處理這些類型的潛在問題，以及如何在Nuxt中進行處理——帶有實際的代碼示例。
此圖中最重要的事情是“created”方法的早期返回。 Nuxt有一個全局可訪問的對象“process”，它顯示我們當前是在服務器端還是在客戶端運行。我們看到的代碼背後的邏輯專注於管理 socket 連接，並且顯然，如果我們在服務器上運行，則我們不想在接收 socket 事件時更新DOM，因為服務器端沒有DOM。
如果這是一個Vue.js應用程序，則除了早期返回部分外，代碼將是相同的——因為該流程將始終在客戶端上運行，並且無需檢查該特定語句。
Nuxt.js基於文件夾結構生成自己的路由器，而對於Vue.js，它必須手動完成——但請記住，這兩種原則各有利弊。自動生成的路由的優點是創建路由更容易，更快捷；您只需創建目錄和文件，Nuxt即可完成所有工作。但是缺點是，與手動編寫相比，它的可控性和可管理性較差。
與手動生成的路由器相比，使用Vue.js可以輕鬆地將自己的邏輯添加到路由器，導入服務並具有更多的路由管理控制。這個原則比較耗時，也很複雜，但這並不總是意味著它會變得更糟。
Nuxt.js 準備好用於企業級應用程序了嗎？
過去有兩個主要因素使Nuxt.js無法用於企業級應用程序：
- typescript支持不佳
- 糟糕的服務器端錯誤處理
當我們處於項目的研究階段（大約6個月前）時，沒有可靠的Typescript入門套件或配置值得其冒險使用。由於存在有大量的linting錯誤和類型缺失，因此我們決定使用Vanilla JS（ES6 +）。同時，對Nuxt.js的Typescript支持已經得到了極大的改善，現在已經可以使用新的入門套件和配置，而不必擔心與Typescript相關的問題。
糟糕的服務器端錯誤處理是我們在開發Nuxt.js應用程序時必須解決的最大，最苛刻的問題。
當代碼在Nuxt.js服務器（Node.js）端執行時，應用程序拋出了非常不相關的錯誤消息，調試和修復這些相同的錯誤確實非常困難和複雜。為了簡化調試，有必要以特定方式處理Node.js方面的錯誤。
現在，有了更好的Typescript支持和對SSR更深入的理解，我可以肯定地說，Nuxt.js已經為中、企業級應用做好了準備，但是仍然有改進的空間——比如在Nuxt的Node.js端提供更好的錯誤處理和AJAX管理。
Nuxt應用程序結構
Nuxt.js與Vue.js具有非常相似的體系結構。只有兩個主要區別：
- Router
- Main App.vue component
Nuxt根據頁面的目錄和文件結構生成路由器邏輯及其路由。例如，如果我們創建目錄和文件 about/index.vue，則Nuxt.js會自動為該頁面創建路線 /about。無需在應用程序中的其他任何地方定義或配置路由。
對於嵌套路由，只需要在父目錄內創建一個目錄——about/me/index.vue 將生成 about/me 路由。對於創建動態嵌套路由或嵌套路由參數，所需要做的就是用lodash前綴命名子目錄—— user/_id /index.vue 將根據用戶的ID為用戶創建動態嵌套路由。
Nuxt.js的另一個與結構相關的功能非常有趣——佈局。Vue.js應用程序具有主App.vue文件，該文件是所有應用程序組件的主要根組件包裝。Nuxt.js使用佈局，其中每個佈局都充當應用程序組件的單獨包裝。例如，如果我們希望某些特定的頁面使用不同的UI庫、全局CSS樣式、字體族、設計系統、元標記或其他元素，我們可以定義使用什麼佈局作為其父根組件。默認情況下，所有的 Nnux.js 頁面都使用 default.vue 佈局。
Nuxt.js中的Vuex的結構幾乎與通常的Vue.js環境相同——帶有 store 模塊。這種結構化是可選的，但強烈建議您進行更好的結構和代碼維護。每個 store 都應基於應用程序邏輯和數據流進行結構化和模塊化。例如，如果應用程序包含授權邏輯，則我們必須創建用於 store 所有授權數據和邏輯的授權 store 模塊，例如登錄，註銷，cookie，令牌，用戶數據等。
總結
首先，開發你的Nuxt.js項目一開始肯定會造成混亂和複雜，尤其是如果您具有不具備SSR知識的Vue.js背景。但是，就像其他任何技術一樣，要真正理解Nuxt.js框架的功能和好處，還需要花費時間，試錯和大量代碼實踐。對於我來說，我熱切地等待著我的下一個Nuxt.js項目，在這裡我將使用我所獲得的知識（並希望是Typescript），而不會遇到之前從事的Nuxt.js + Typescript項目的任何障礙。
Nuxt.js是一個非常強大的框架，具有許多有用的功能，這些功能使開發前端應用程序更容易，更有趣。但是請記住，它不是所有類型的客戶端應用程序和網站的最佳選擇。
那麼，要回答主要問題——Nuxt.js還是Vue.js？答案是，您必須瞭解每種方法的優缺點，並且您還需要知道何時根據項目類型、目標和需求使用一種方法。
Nuxt.js 的服務器端渲染功能，自動通用路由器的快速開發，公共共享功能以及具有出色配置選項和元標記方法的管理，帶有預渲染頁面的自動代碼拆分，可提供更好的SEO改進。Vue.js無法實現或極其複雜。如果您的下一個項目需要這些功能，我向您保證Nuxt.js將是一個不錯的選擇。
另一方面，如果您的目標是內部產品、典型的客戶端SPA、不需要SEO率和性能，那麼Vue是最明顯的選擇。因為在處理所有這些方面，它遠遠優於 Nnux.js。
如果對你有所啟發和幫助，可以點個關注、收藏，也可以留言討論，這是對作者的最大鼓勵。
作者簡介：Web前端工程師，全棧開發工程師、持續學習者。
現在關注《前端外文精選》微信公眾號，還送某網精品視頻課程網盤資料啊，準能為你節省不少錢！
閱讀更多 做工程師不做碼農 的文章
