EP28 - 非同步組件

Async Components 非同步我是知道這個東西！
是讓加載組件的時候可以非同步，改善用戶體驗吧～？
這裡應該不包含資料的非同步加載吧！？～

基本用法 - Basic Usage

在大型應用中，我們可能需要將應用劃分為較小的部分，並且僅在需要時從伺服器加載組件。為了實現這一點，Vue 提供了 defineAsyncComponent 函數：

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    // ...從伺服器加載組件
    resolve(/* 加載的組件 */)
  })
})
// ...像正常組件一樣使用 `AsyncComp`

如你所見，defineAsyncComponent 接受一個加載函數，該函數返回一個 Promise。當你從伺服器獲取到組件定義時，應該調用 Promise 的 resolve 回調。如果加載失敗，也可以調用 reject(reason) 來指示加載失敗。

ES 模塊的動態導入也會返回一個 Promise，因此大多數情況下，我們會將它與 defineAsyncComponent 結合使用。像 Vite 和 webpack 這樣的打包工具也支持該語法（並會將其作為捆綁分割點），因此我們可以用它來導入 Vue 單文件組件（SFC）：

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
)

結果的 AsyncComp 是一個包裝組件，只有在實際渲染在頁面上時才會調用加載函數。此外，它會將任何屬性和插槽傳遞給內部組件，因此你可以使用這個非同步包裝器無縫地替換原始組件，同時實現延遲加載。

與普通組件一樣，可以使用 app.component() 全局註冊非同步組件：

app.component('MyComponent', defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
))

也可以直接在其父組件內部定義：

<script setup>
import { defineAsyncComponent } from 'vue'

const AdminPage = defineAsyncComponent(() =>
  import('./components/AdminPageComponent.vue')
)
</script>

<template>
  <AdminPage />
</template>

Q: 什麼是Promise?

Promise 是 JavaScript 中的一個對象，用於表示一個異步操作的最終完成（或失敗）及其結果值。簡單來說，Promise 可以讓你在執行異步操作時更方便地處理結果，尤其是在處理異步請求時（如 AJAX 請求）。

Promise 的狀態

Promise 具有三種狀態：

1. 待定（Pending）：初始狀態，既不是成功也不是失敗。
2. 已解決（Fulfilled）：異步操作成功完成，並返回了一個結果。
3. 已拒絕（Rejected）：異步操作失敗，並返回了一個錯誤原因。

使用 Promise 的基本範例

以下是一個使用 Promise 的簡單範例：

const myPromise = new Promise((resolve, reject) => {
  // 假設這是一個異步操作，例如 AJAX 請求
  const success = true; // 模擬操作成功或失敗的標誌

  if (success) {
    resolve("操作成功！"); // 異步操作成功，調用 resolve
  } else {
    reject("操作失敗！"); // 異步操作失敗，調用 reject
  }
});

// 使用 then() 處理已解決的狀態，catch() 處理已拒絕的狀態
myPromise
  .then(result => {
    console.log(result); // 輸出: 操作成功！
  })
  .catch(error => {
    console.error(error); // 如果失敗，輸出錯誤原因
  });

Promise 的鏈式調用

Promise 允許鏈式調用，即在一個 Promise 完成後可以再返回一個新的 Promise，這樣可以方便地處理多個異步操作。例如：

fetch('https://api.example.com/data')
  .then(response => response.json()) // 將 response 轉換為 JSON
  .then(data => {
    console.log(data); // 使用獲取到的數據
  })
  .catch(error => {
    console.error('發生錯誤:', error); // 處理錯誤
  });

這段程式碼實際上是使用 fetch API，它本身就會返回一個 Promise 物件。這裡是 Promise 的運作方式的具體說明：

fetch 函數

fetch 函數用於發送網絡請求，它會返回一個 Promise。這個 Promise 代表請求的狀態，會在請求完成後進行解決（resolve）或拒絕（reject）。

總結

Promise 使得處理異步操作更加簡潔和可讀，尤其是在需要執行多個連續的異步操作時。使用 Promise 可以避免回調地獄（callback hell）現象，使代碼更易於維護和理解。

加載和錯誤狀態 - Loading and Error States

非同步操作必然涉及加載和錯誤狀態——defineAsyncComponent() 支持通過高級選項處理這些狀態：

const AsyncComp = defineAsyncComponent({
  // 加載函數
  loader: () => import('./Foo.vue'),

  // 加載非同步組件時使用的組件
  loadingComponent: LoadingComponent,
  // 顯示加載組件的延遲。默認：200ms。
  delay: 200,

  // 加載失敗時使用的組件
  errorComponent: ErrorComponent,
  // 如果提供並超過超時，將顯示錯誤組件。默認：Infinity。
  timeout: 3000
})

如果提供了加載組件，則在內部組件加載時會首先顯示它。顯示加載組件之前會有一個默認的 200 毫秒延遲，這是因為在快速網絡下，瞬時的加載狀態可能會被替換得太快，最終看起來像是閃爍。

如果提供了錯誤組件，當加載函數返回的 Promise 被拒絕時，它會顯示。如果請求花費的時間過長，你還可以指定超時，以顯示錯誤組件。

Q: 什麼是Hydration 水合？

水合（Hydration） 是一個在伺服器端渲染（Server-Side Rendering, SSR）應用程式中使用的概念，特別是在像 Vue.js 和 React 這樣的框架中。這個過程涉及將伺服器生成的靜態 HTML 轉換為可互動的客戶端應用程式。

水合的工作流程

1. 伺服器端渲染：當用戶請求一個頁面時，伺服器生成一個完整的 HTML 頁面並發送給用戶的瀏覽器。這樣用戶可以快速看到內容，而不必等待 JavaScript 完全加載。
2. 客戶端加載 JavaScript：當瀏覽器接收到 HTML 時，JavaScript 檔案也會被加載。這些 JavaScript 代碼包含了應用程式的邏輯和行為。
3. 添加互動性：在 JavaScript 加載完成後，框架會將伺服器生成的靜態內容「水合」成可互動的元素。這包括將事件處理器綁定到 DOM 元素，使得用戶可以與應用程式互動。

水合的好處

• 快速響應時間：用戶可以立即看到頁面內容，而不必等待所有 JavaScript 完全加載。這提高了首次渲染的速度。
• SEO 友好：伺服器端渲染的頁面對搜尋引擎更友好，因為搜尋引擎可以抓取到靜態 HTML 內容，而不是等待 JavaScript 加載。
• 增強用戶體驗：用戶在等待 JavaScript 加載時，仍然能夠看到和訪問內容，提供更流暢的體驗。

水合的挑戰

• 狀態不一致：如果伺服器端渲染的 HTML 和客戶端的 JavaScript 之間存在狀態不一致，可能會導致重水合過程中的錯誤或不正確的顯示。
• 性能開銷：水合過程會消耗資源，特別是在需要大量 DOM 操作的情況下。

延遲水合 - Lazy Hydration (3.5+)

這部分僅適用於使用伺服器端渲染的情況。

在 Vue 3.5+ 中，非同步組件可以通過提供水合策略來控制何時水合。

Vue 提供了多種內建水合策略。這些內建策略需要單獨導入，以便在未使用時進行樹搖（tree-shaking）。

設計上是故意低層次的，以提高靈活性。將來可以在核心或更高層次的解決方案（例如 Nuxt）上構建編譯器語法糖。

空閒時水合 - Hydrate on Idle

通過 requestIdleCallback 進行水合：

import { defineAsyncComponent, hydrateOnIdle } from 'vue'

const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  hydrate: hydrateOnIdle(/* 可選地傳入最大超時 */)
})

可見時水合 - Hydrate on Visible

當元素變得可見時通過 IntersectionObserver 進行水合。

import { defineAsyncComponent, hydrateOnVisible } from 'vue'

const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  hydrate: hydrateOnVisible()
})

可以選擇性地傳入觀察者的選項對象值：

hydrateOnVisible({ rootMargin: '100px' })

媒體查詢時水合 - Hydrate on Media Query

當指定的媒體查詢匹配時進行水合。

import { defineAsyncComponent, hydrateOnMediaQuery } from 'vue'

const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  hydrate: hydrateOnMediaQuery('(max-width:500px)')
})

交互時水合 - Hydrate on Interaction

當在組件元素上觸發指定事件時進行水合。觸發水合的事件也會在水合完成後重放。

import { defineAsyncComponent, hydrateOnInteraction } from 'vue'

const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  hydrate: hydrateOnInteraction('click')
})

也可以是多個事件類型的列表：

hydrateOnInteraction(['wheel', 'mouseover'])

自定義策略 - Custom Strategy

import { defineAsyncComponent, type HydrationStrategy } from 'vue'

const myStrategy: HydrationStrategy = (hydrate, forEachElement) => {
  // forEachElement 是一個幫助函數，用於迭代組件的非水合 DOM 中的所有根元素，
  // 因為根元素可以是片段而不是單一元素
  forEachElement(el => {
    // ...
  })
  // 準備好後調用 `hydrate`
  hydrate()
  return () => {
    // 如果需要，返回一個清理函數
  }
}

const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  hydrate: myStrategy
})

與 Suspense 一起使用 - Using with Suspense

非同步組件可以與 <Suspense> 內建組件一起使用。<Suspense> 和非同步組件之間的交互已在專門的 <Suspense> 章節中記錄。

Q: 什麼是Suspense？

Suspense 是 Vue 3 中引入的一個功能，用於處理異步組件的加載狀態。它允許開發者更輕鬆地管理異步組件在加載過程中的顯示效果，例如在組件尚未加載完成時顯示一個加載指示器或佔位符。

Suspense 的工作原理

1. 包裹異步組件：將一個或多個異步組件包裹在 <Suspense> 組件中，這樣可以控制當這些異步組件加載時的顯示內容。
2. 使用 slot：<Suspense> 提供了兩個 slot：

• default slot：用於顯示加載完成後的內容。
• fallback slot：用於顯示在加載期間的內容，例如加載指示器或佔位符。

以下是一個使用 Suspense 的範例：

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <LoadingSpinner /> <!-- 加載時顯示的內容 -->
    </template>
  </Suspense>
</template>

<script setup>
import AsyncComponent from './AsyncComponent.vue'
import LoadingSpinner from './LoadingSpinner.vue'
</script>

在這個例子中，當 AsyncComponent 正在加載時，<LoadingSpinner /> 將顯示在畫面上。一旦 AsyncComponent 加載完成，<AsyncComponent /> 將取代加載指示器顯示。

使用場景

• 異步數據加載：當需要從伺服器獲取數據並且這個過程可能需要一些時間時，可以使用 Suspense 來提供良好的用戶體驗。
• 多個異步組件：當有多個異步組件需要加載時，可以使用 Suspense 來統一管理它們的加載狀態。

結論

Suspense 是 Vue 3 提供的一個強大功能，旨在簡化異步組件的管理和顯示。它可以提升用戶體驗，讓開發者更方便地處理異步加載時的狀態和顯示效果。

Q: 為什麼要用SSR？

使用 伺服器端渲染（SSR, Server-Side Rendering） 有多個優點，特別是在構建現代化的網頁應用程式時。以下是一些使用 SSR 的原因：

1. 更快的初始加載時間

• SSR 會在伺服器上預渲染 HTML，這樣用戶在首次加載頁面時可以立即看到內容，而不需要等待 JavaScript 加載和執行完成。這對於用戶體驗尤為重要，特別是在網速較慢的情況下。

2. 更好的 SEO（搜索引擎優化）

• 搜索引擎的爬蟲在索引網頁內容時通常對 JavaScript 渲染的內容支持不佳。使用 SSR，頁面的 HTML 在伺服器端生成，搜索引擎可以輕易讀取並索引這些內容，從而提高網站的可見性和排名。

3. 改善社交媒體分享

• 在 SSR 中生成的 HTML 包含完整的內容，這樣當用戶在社交媒體上分享頁面鏈接時，社交平台能夠抓取到正確的預覽信息（例如標題、描述、縮略圖等），提高了分享的效果。

4. 降低客戶端負擔

• SSR 將大部分渲染工作移至伺服器端，這可以降低客戶端設備（特別是移動設備）的運算負擔，提供更流暢的用戶體驗。

5. 更佳的性能優化

• SSR 使得在伺服器端進行性能優化變得更加容易，例如使用快取來提高響應速度，這對於需要快速響應的應用特別重要。

6. 支持多種渲染策略

• 使用 SSR 可以更靈活地支持不同的渲染策略，例如先渲染主要內容，然後再進行其他次要內容的加載。

7. 可擴展性

• SSR 可以輕鬆地與其他技術堆棧結合使用，例如與 Node.js、Express、Django 等後端框架協作，提供更完整的全棧解決方案。

總結

SSR 提供了更好的性能、SEO 和用戶體驗，使其成為構建現代網頁應用程式的一個非常有效的解決方案。然而，實現 SSR 也需要考慮一些挑戰，例如伺服器負載和複雜的開發過程，因此在選擇使用 SSR 時需要根據具體需求進行評估。

這章節有些JS沒學好的觀念一起補齊，
這樣才能對框架的非同步能有更深的理解www~
文章中很多Q的話～就是我個人的疑問，
盡量找好理解的資訊放上去了，難道大家都這麼清楚嗎？
Vue + Nuxt.js = SSR