本篇搭配 @nuxt/image v1.8.0

網站體驗指標（Web Vitals） 是 Google 定義的一組用來衡量網站使用者體驗的指標，這些指標反映了使用者在瀏覽網站時的實際體驗，會影響網站在搜尋引擎上的排名。

自 2024 年 3 月起，三大核心指標（Core Web Vitals）更新如下：

• 最大內容繪製（LCP，Largest Contentful Paint）：測量頁面主要內容的載入效能
• 互動至下一次繪製（INP，Interaction to Next Paint）：測量頁面在使用者互動過程中的回應速度
• 累積版面位移（CLS，Cumulative Layout Shift）：測量視覺穩定性，避免不預期的版面配置位移

網站的圖片與這些核心指標密切相關，因為頁面上的主要元素通常包含圖片。圖片的大小直接影響載入速度，進而影響使用者互動的回應時間。如果圖片未設定固定的寬高比例，甚至會導致版面配置位移，進而影響使用者體驗。

閱讀更多

為什麼需要 Nuxt DevTools？

Nuxt DevTools 是 Nuxt 團隊推出的視覺化開發工具，用來協助我們快速了解 Nuxt 專案的內容，近一步提升開發者體驗（DX，Developer Experience）。

關於開發者體驗（DX）介紹，這裡推薦一篇文章

Nuxt3 提供許多內建功能，例如：

• 預設使用 Vite 打包工具，支援 hot module replacement（HMR）
• 引入伺服器引擎 Nitro，讓我們可以將應用程式部署到 Vercel、Netlify、Cloudflare 等託管服務
• 許多內建功能，像是支援 TypeScript、各種組合式函式、SEO 搜尋引擎優化輔助函式等
• auto-imports 自動引入功能
• 依據檔案結構自動生成路由與 API 路徑
• 提供許多模組，讓開發者可以快速整合所需的功能，不需另外進行配置

這些功能是 DX 最直接具體的實踐，雖然能讓我們能輕鬆建立 Nuxt3 專案，但也會面臨「資訊透明度不足」的問題。抽象化設計是一把雙面刃，在化繁為簡、避免重工的同時，也會增加額外的學習負擔與除錯困難。

Nuxt DevTools 便是為了解決此問題而設計的視覺化工具，能夠提升 Nuxt 框架和應用程式的透明度、找到效能瓶頸，以及協助我們管理應用和配置。

閱讀更多

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

專案開發完成後，終於到最後一步「部署」，本篇將說明 Universal 專案部署到 Firebase。Universal 渲染模式需要伺服器才能運作，因此會搭配 Firebase Cloud Functions（Serverless）來協助處理 SSR 的部分。

Universal Rendering 相關說明可以參考 這篇文章

實作分為以下步驟：

• 申請 Firebase Project
• 透過 CLI 部署至 Firebase

閱讀更多

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

專案開發完成後，終於到最後一步「部署」，本篇使用靜態網站生成（SSG），搭配 GitHub Pages 託管靜態網頁內容。

Static Site Generation（SSG）靜態網站生成

在編譯時產生靜態 HTML 頁面。靜態部署適合內容固定、不需資料庫、不含伺服器端動態渲染的網站（例如公司形象網站或是個人部落格），雖然不像 Universal Rendering 一樣彈性，不過靜態網站很適合搭配 CDN 緩存。

閱讀更多

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

Nuxt3 搭配了新的伺服器引擎 Nitro，讓我們能輕鬆建立 Server API，並在 Nuxt3 專案內使用。Nitro 的優點包含跨平台支援 Node.js 與瀏覽器、支援 HMR、自動生成 API 路由等。

實務上 API 開發常會搭配資料庫連接，本篇將說明如何結合 MongoDB，實作後端 API 開發與前端串接，讓我們的 Nuxt 專案具備全端功能。

本文重點在 Nuxt 與 MongoDB 整合，需先具備以下知識：

• Nuxt Server API，可以參考 這篇文章
• Nuxt $fetch 方法，可以參考 這篇文章
• MongoDB 應用（本文僅簡單說明）

閱讀更多

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

Sitemap 是一種用來提供網站資訊的檔案，記錄網站內的網頁、圖片等，主要功用為協助搜尋引擎快速了解我們的網頁。

新網站上線後，雖然搜尋引擎爬蟲會自動讀取網站內容並收錄，不過當網站規模較大、架構較複雜、彼此間連結性較低，可能需要花較長的時間才能完整收錄，透過 Sitemap，直接告訴搜尋引擎網頁資訊，能有效加快網頁收錄的速度。

接下來說明如何在 Nuxt3 專案內加入 Sitemap 網站地圖：

閱讀更多

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

Nuxt3 提供兩個資料夾 assets/ 以及 public/，用來管理靜態資源，像是圖片、CSS 樣式、字體、icon 等，接下來說明兩個目錄適合存放的檔案類型與使用方式

閱讀更多

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

Components 目錄用來定義 Vue 共用元件，元件的特性為將部分模板、程式碼進行封裝，讓我們可以重複使用。在 Components 建立的檔案，Nuxt 會自動引入（auto-import），接著在整個專案 pages / components / layouts 都能搭配使用

建立元件

components/
|—— TheHeader.vue
|—— TheFooter.vue

閱讀更多

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

Nuxt 3 提供大量內建功能，包括預設錯誤頁面，可以在隱藏資料夾 .nuxt/dev/index.mjs 看到，我們也可以自訂錯誤頁面，Nuxt 預設錯誤畫面如下：

閱讀更多

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

Middleware 為 Nuxt 內的 路由守衛（Navigation Guards），相當於 Vue Router 內的 beforeEach callback，協助我們在進到頁面前進行事件處理（例如權限檢查）

Middleware 觸發時機：

• 頁面初始化：Server Side 跟 Client Side 同時觸發（觸發兩次）
• 頁面切換：Client Side 觸發

Middleware 定義方式：

• 具名：在 middleware/ 定義，並在需要的頁面引入
• 全域：同具名的定義方式，不過檔名需加上 .global 後綴，在所有頁面切換時自動執行
• 匿名：直接在單一元件檔內定義

閱讀更多