Rendering

• SSR(Server-side rendered sites)：收到請求時，都會在伺服器端先把頁面個渲染出來準備好，也就是說伺服器需要為每一個 request 準備好頁面。
• Static sites：與 SSR 有點像，其中的差異在於靜態的網站是在 build time 的時候渲染的，他並不需要伺服器來幫他渲染，換頁的時候會是一個一個檔案去做切換的（每次切換都會讓頁面重整）
• CSR(Client Side Rendering)：頁面的渲染並非在伺服器端進行，而是到了用戶端（瀏覽器）的時候才透過 JavaScript 來渲染。我們不需要去取得完整的 HTML 檔案，只要一個基本的 HTML 檔案與 JavaScript 就可以將畫面給渲染出來了。

Deployment Targets

• Static Hosting：
  透過 nuxt generate 來產生靜態版本的網站，他會被放在 dist 的資料夾中，他會替每個路徑都產生一個 HTML 檔案，這也讓他的 SEO 與在離線環境中的表現更好。
• Server Hosting：
  這個方式是將專案在 Node.js 的伺服器上運行，當使用者打開你的頁面後，瀏覽器會將 request 送至伺服器，Nuxt 則會接收這個 request 並將頁面渲染完成後送回去瀏覽器呈現，所以頁面的產生會是發出 request 的時候，而非預先產生的。透過這個方式運行的專案可以讓你使用 serverMiddleware。

File system routing

Nuxt 會自動地根據你在 page 資料夾中的檔案結構來生成對應的路徑。

• 基本的路徑：就是依據資料夾的結構去產生
• 動態路徑：會在檔案名稱之前加上 _（pages/users/_id.vue）作為前綴；如果想取得此路徑的參數，可以用 this.$route.params.id 來取得。

Data Fetching

除了在 mounted() 中將資料取回之外，在 Nuxt 中，還可以用 fetch 與 asyncData 兩種方式從 API 取回資料。

• fetch：這個 hook 可以在任何的元件中使用，他也提供了一些取得 loading 狀態、錯誤訊息的方式。
• asyncData：這個 hook 只能在 page 的元件中使用，與 fetch 不同的是，用這個 hook 取資料的時候不會出現 loading 的狀態；取而代之的是，在資料取回來之前，route 都會被鎖著。

Meta Tags and SEO

Nuxt 提供了三種讓你設定 meta-data 的方式：

• Globally：使用 nuxt.config.js 來對整份專案進行設定。

export default {
  head: {
    title: 'my website title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: 'my website description'
      }
    ],
    script: [
        {
            src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
        }
    ],
    link: [
        {
            rel: 'icon',
            type: 'image/x-icon',
            href: '/favicon.ico' 
        },
        {
            rel: 'stylesheet',
            href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap'
        }
    ]
  }
}

• Locally：將 head 作為物件做局部的設定；可以在每個頁面中個別進行設定

<script>
export default {
  head: {
    title: 'Home page',
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: 'Home page description'
      }
    ],
  }
}
</script>

• Locally：將 head 作為 function 來對局部進行設定的時候，可以在 head 裏去取得 data 與屬性

<template>
  <h1>{{ title }}</h1>
</template>
<script>
  export default {
    data() {
      return {
        title: 'Home page'
      }
    },
    head() {
      return {
        title: this.title,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: 'Home page description'
          }
        ],
        script: [
          {
            src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
          }
        ],
        link: [
          {
            rel: 'stylesheet',
            href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap'
          }
        ]
      }
    }
  }
</script>

Configuration

Nuxt 所預設的部分已經涵蓋了大多數我們會遇到的情形，如果需要將其蓋過的話可以在 nuxt.config.js 上進行設定（設定的項目繁多，不在此一一列出，可參考標題的官方文件連結）

Loading

在路徑切換的時候，可以使用這個來顯示載入的效果。

• Progress Bar：
  • 可在 nuxt.config.js 進行樣式的設定與啟用與否
  • 也可以在元件中啟用 loading bar。開始：this.$nuxt.$loading.start()、結束：this.$nuxt.$loading.finish()

    export default {
    mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()
      setTimeout(() => this.$nuxt.$loading.finish(), 500)
    })
    }
    

  }
  ```
  • 在 loading 尚未完成時，可以讓 progress bar 重複播放
• Custom Loading Component
  除了預設的進度條之外，也可以自己在 components 中新增 loading 要顯示的元件（components/LoadingBar.vue），設定完成後可在 nuxt.config.js 中進行設定：

  export default {
    loading: '~/components/LoadingBar.vue'
  }
  
  

• Loading indicator
  在資料與畫面渲染完成之前，可透過這個來顯示載入的情況。

Nuxt Components

這些 Nuxt 所提供的元件是全域通用的，所以不用特地 import 也能使用（因數量繁多，可移至官方文件詳讀）

Component Discovery

在 nuxt.config.js 將 copmonents 設定為 true 後，在引入 components 的時候就不用再 scripts 標籤內的 components 進行宣告了。

Transitions

可以透過這個元件來建立路徑切換時的動態效果。

Preview mode

參考

Nuxt.js Features