單頁面應用（SPA）越來越無法滿足業務對頁面響應速度的要求。隨著工程不斷變大，打包檔案不斷增長，頁面的整體重新整理載入速度慢慢成為瓶頸。越來越多的應用開始使用服務端描畫（SSR）來提高響應速度。

　　我們專案在SPA單頁的時候，mouted元素部分，都是先去服務端拉取js指令碼，然後客戶端解析成html，那這樣可能就會出現白屏時間過長，雖然現在有骨架技術，也就是在響應的html主體中，填充靜態內容，但也是治標不治本。而在SSR下，mouted部分是服務端描畫好後，直接傳送到客戶端，客戶端不用進行html的重新組合，只需要啟用即可。 　　那就不得不提到Nuxt.js了，他是基於Vue.js的通用應用框架，通過對客戶端/服務端基礎框架的抽象組織，Nuxt.js關注的是UI渲染，不過也支援SPA，但是SSR才是他的重點。

　　SSR的優點無非兩個，一個是對SEO友好，二就是更快的內容到達時間，也就是載入的更快。但是SSR有更長的鏈路，之前是瀏覽器+nginx+後臺服務，而現在就變成瀏覽器+nginx+nodejs+後臺服務。nodejs中的阻塞型請求，容易成為效能的瓶頸。一套api，要考慮前後端的相容性對業務開發人員來說，曲線變長，需要能明確程式碼在前後端的執行位置。

　　Nuxt與vue的目錄結構以及作用有些許區別這裡簡單說一下

.
├── README.md
├── assets
├── components
├── layouts
├── middleware
├── node_modules
├── nuxt.config.js
├── package.json
├── pages
├── plugins
├── static
├── store
└── yarn.lock

1. assets: 資原始檔。放置需要經過 webpack 打包處理的資原始檔，如 scss，圖片，字型等。
2. components: 元件。這裡存放在頁面中，可以複用的元件。
3. layouts: 佈局。頁面都需要有一個佈局，預設為 default。它規定了一個頁面如何佈局頁面。所有頁面都會載入在佈局頁面中的<nuxt />標籤中。如果需要在普通頁面中使用下級路由，則需要在頁面中新增<nuxt-child />。該目錄名為Nuxt.js保留的，不可更改。
4. middleware: 中介軟體。存放中介軟體。可以在頁面中呼叫：middleware: 'middlewareName'。
5. pages: 頁面。一個 vue 檔案即為一個頁面。index.vue 為根頁面。
6. plugin: 外掛。用於組織那些需要在根vue.js應用例項化之前需要執行的 Javascript 外掛。需要注意的是，在任何 Vue 元件的
   生命週期內， 只有beforeCreate和created這兩個鉤子方法會在客戶端和服務端均被呼叫。其他鉤子方法僅在客戶端被呼叫。
   1. 若需要二級頁面，則新增資料夾即可。
   2. 如果頁面的名稱類似於_id.vue（以_開頭），則為動態路由頁面，_後為匹配的變數（params）。
   3. 若變數是必須的，則在資料夾下建立空檔案index.vue。
8. static: 靜態檔案。放置不需要經過 webpack 打包的靜態資源。如一些 js, css 庫。
9. store: 狀態管理。
10. nuxt.config.js:nuxt.config.js檔案用於組織Nuxt.js 應用的個性化配置，以便覆蓋預設配置。

　　　　 　　Nuxt沒有像Vue專門的路由配置檔案，他是依靠page中檔案層級來定義路由的，那我們一些路由重定向的配置，以及沒有登入需要跳轉到登入頁面這個Nuxt也為我們提供了中介軟體

 1 export default function ({ store, redirect }) {
 2   if (!store.state.user) {
 3     return redirect('/login')
 4   }
 5 }
 6 //頁面單獨使用
 7 export default {
 8   middleware: 'auth'
 9   }
10 ///全域性使用
11 module.exports = {
12   router: {
13     middleware: 'auth'
14   }  

　　偶然間從大佬那裡瞭解到Nuxt，記性不好，在此做個簡單的記錄，目前也用不到好像用這個框架的也很少，nuxt的學習曲線非常小，就像vue框架一樣，已經是一個開箱即用的狀態，我們可以直接跨過配置直接開發。