Nuxt.js 開發

什麼是 Nuxt？

Nuxt 是一個 Vue.js 框架，它處理生產應用程式所需的一切：伺服器端渲染、靜態網站生成、文件系統路由、狀態管理和伺服器 API 路由 -- 幾乎無需配置。而純 Vue 需要自行組裝這些組件，Nuxt 將它們作為一個連貫的、有見地的系統提供。

定義特徵是渲染靈活性。單個 Nuxt 應用程式可以用不同的渲染策略服務不同的路由：伺服器渲染首頁以改進 SEO、在構建時靜態預渲染部落格文章，以及客戶端渲染登入後的儀表板。這是 Nuxt 的混合渲染模式，在 nuxt.config.ts 中按路由配置。

文件系統路由

Nuxt 從你的 pages/ 目錄自動生成路由。無需路由配置文件。pages/blog/[slug].vue 中的文件變成 /blog/:slug。pages/about.vue 中的文件變成 /about。嵌套目錄創建嵌套路由。

這延伸到伺服器層。server/api/ 中的文件變成 API 端點。server/api/posts.get.ts 變成 GET /api/posts 處理器。一個項目中的完整堆棧，全程 TypeScript。

相同的約定適用於：

• composables/：自動導入的 Vue composables -- useFetch、useState、useAsyncData
• middleware/：在導航前運行的路由中間件
• layouts/：包裝頁面的共享佈局組件
• plugins/：在應用程式初始化時運行的代碼
• components/：自動導入的 Vue 組件，無需顯式導入語句

渲染模式

SSR（伺服器端渲染）：默認模式。HTML 在伺服器上按請求渲染。適合動態內容、個人化和已驗證頁面。由 Nitro 伺服器引擎驅動。

SSG（靜態網站生成）：頁面在構建時預渲染。輸出是從 CDN 提供的靜態 HTML。使用 nitro.prerender.routes 配置或在路由級別設置 ssr: false。

混合渲染：不同的路由使用不同的策略。nuxt.config.ts 中的 routeRules 讓你為每條路由設置預渲染、SSR、緩存 TTL、重定向和 CORS 規則。這是 Nuxt 最強大且最未被充分利用的功能。

SPA 模式：完整的客戶端渲染。適用於管理面板或儀表板，其中 SEO 不是關注點，交互性是優先考慮。

我們用 Nuxt 構建的應用

行銷網站和內容平台

Nuxt 與 SSG 或混合渲染相結合是行銷網站的強大組合。內容路由預渲染以改進性能和 SEO。動態路由 -- 搜尋、篩選、個人化推薦 -- 使用 SSR 或客戶端獲取。結果是一個快速、SEO 友善的網站，在需要的地方具有完整的交互性。

全堆棧網頁應用程式

Nuxt 的伺服器層（Nitro）在與前端相同的項目中處理 API 路由、中間件、資料庫連接和伺服器端邏輯。這是一個真正的全堆棧框架 -- 我們在應用程式中使用它，其中單獨的 API 伺服器會增加不必要的複雜性。

Nuxt 與無頭 CMS

Nuxt 與無頭 CMS 集成清晰：Strapi、Contentful、Sanity 和 DatoCMS 都有官方或社區 Nuxt 模組。我們配置資料層、為內容路由設置 ISR 緩存，以及連接 CMS 的 webhook 到 Nuxt 重建觸發器。

Vue 到 Nuxt 遷移

擁有需要 SEO SSR 的現有 Vue.js SPA 的團隊經常遷移到 Nuxt。組件模型是相同的 -- 遷移主要是重組路由和添加伺服器端資料獲取。我們處理這些遷移並保留所有現有組件邏輯。

Nitro 伺服器引擎

Nuxt 的 Nitro 引擎處理伺服器端渲染和 API 路由。它是框架不可知的：同一個 Nuxt 應用程式可以部署到 Node.js、Cloudflare Workers、AWS Lambda、Vercel Edge Functions 或 Netlify，無需代碼更改。這種部署靈活性是一個有意義的運營優勢。

Nuxt 模組生態系統

Nuxt 的模組系統以最少的配置添加功能：

• @nuxt/content：使用 Markdown/YAML/JSON 的基於文件的 CMS。適合文檔網站和部落格。
• @nuxt/image：自動圖像優化、格式轉換和延遲加載。
• @pinia/nuxt：Pinia 狀態管理，自動導入和 SSR 兼容。
• @nuxtjs/i18n：國際化和基於語言環境的路由。
• @nuxtjs/tailwindcss：Tailwind CSS 集成。
• nuxt-security：安全標頭、CSRF 保護、速率限制。

我們根據項目要求選擇和配置模組。無模組臃腫。

Nuxt 對比 Next.js

兩者都是生產級元框架。選擇主要取決於你的團隊現有知識和對 Vue 對比 React 的偏好。

選擇 Nuxt 時：

• 你的團隊知道 Vue.js 並偏好其組件模型
• 你想要包含電池的默認設置，配置更少
• 你重視 Nuxt 模組生態系統以快速添加功能
• 你想要混合渲染，無需複雜的中間件配置

選擇 Next.js 時：

• 你的團隊是 React 優先
• 你需要 React Server Components
• 你想要 Vercel 的原生優化

兩者都可以清晰地部署到 Vercel、Netlify 和 Cloudflare。我們對兩者都有經驗，會誠實地說明哪個更適合你的特定項目和團隊。