透過 100 多個訣竅的集合學習 Nuxt!

伺服器

使用 Nuxt 的伺服器框架構建全端應用程式。您可以從資料庫或其他伺服器提取資料、建立 API,甚至產生靜態伺服器端內容,例如網站地圖或 RSS Feed,所有這些都來自單一程式碼庫。
文件 > 指南 > 目錄結構 > 伺服器 中閱讀更多資訊。

由 Nitro 提供技術支援

Server engine

Nuxt 的伺服器是 Nitro。它最初是為 Nuxt 創建的,但現在是 UnJS 的一部分,並開放給其他框架使用,甚至可以單獨使用。

使用 Nitro 可以讓 Nuxt 擁有超能力

  • 完全控制應用程式的伺服器端部分
  • 在任何供應商上進行通用部署(許多零配置)
  • 混合渲染

Nitro 內部使用 h3,這是一個為高效能和可移植性而構建的最小 H(TTP) 框架。

觀看 Alexander Lichter 的影片,了解 Nuxt 和 Nitro 在您的應用程式中的責任。

伺服器端點和中介軟體

您可以輕鬆管理 Nuxt 應用程式中僅限伺服器的部分,從 API 端點到中介軟體。

端點和中介軟體都可以這樣定義

server/api/test.ts
export default 
defineEventHandler
(async (
event
) => {
// ... Do whatever you want here })

您可以直接傳回 textjsonhtml 甚至是 stream

開箱即用,它像 Nuxt 應用程式的其他部分一樣支援熱模組替換自動匯入

文件 > 指南 > 目錄結構 > 伺服器 中閱讀更多資訊。

通用部署

Nitro 提供將 Nuxt 應用程式部署到任何地方的能力,從裸機伺服器到邊緣網路,啟動時間僅需幾毫秒。這真的很快!

部落格 > Nuxt On The Edge 中閱讀更多資訊。

有超過 15 個預設值可為不同的雲端供應商和伺服器建置您的 Nuxt 應用程式,包括

或用於其他執行階段

Deno

Bun

文件 > 開始使用 > 部署 中閱讀更多資訊。

混合渲染

Nitro 有一個強大的功能叫做 routeRules,它允許您定義一組規則,來自訂 Nuxt 應用程式中每個路由的渲染方式(以及更多)。

nuxt.config.ts
export default 
defineNuxtConfig
({
routeRules
: {
// Generated at build time for SEO purpose '/': {
prerender
: true },
// Cached for 1 hour '/api/*': {
cache
: {
maxAge
: 60 * 60 } },
// Redirection to avoid 404 '/old-page': {
redirect
: {
to
: '/new-page',
statusCode
: 302 }
} // ... } })
了解所有可用的路由規則,來自訂路由的渲染模式。

此外,還有一些 Nuxt 特有的路由規則(例如,ssrappMiddlewareexperimentalNoScripts),用於更改將頁面渲染為 HTML 時的行為。

一些路由規則(appMiddlewareredirectprerender)也會影響客戶端行為。

Nitro 用於建構應用程式以進行伺服器端渲染以及預先渲染。

請閱讀 文件 > 指南 > 概念 > 渲染 以了解更多資訊。