[{"data":1,"prerenderedAt":560},["ShallowReactive",2],{"blog:\u002Fblog\u002Fnuxt\u002Fnuxt-server-engine-nitro-h3":3},{"id":4,"title":5,"author":6,"body":7,"category":546,"date":547,"description":548,"draft":549,"extension":550,"image":551,"meta":552,"navigation":553,"path":554,"seo":555,"series":551,"seriesOrder":551,"seriesTitle":551,"stem":556,"tags":557,"updatedAt":551,"__hash__":559},"blog\u002Fblog\u002Fnuxt\u002Fnuxt-server-engine-nitro-h3.md","簡介 Nuxt 中的伺服器引擎：Nitro 與 H3","charles",{"type":8,"value":9,"toc":532},"minimark",[10,15,19,75,78,82,85,121,125,302,329,333,359,363,473,476,480,490,493,500,503,522,525,528],[11,12,14],"h2",{"id":13},"nitronuxt-的通用伺服器引擎","Nitro：Nuxt 的通用伺服器引擎",[16,17,18],"p",{},"Nitro 是 Nuxt 團隊打造的 Universal JS Server，負責處理 API routes、middleware、server plugins 與 SSR 渲染。其主要特點如下：",[20,21,22,30,45,51,57,63,69],"ul",{},[23,24,25,29],"li",{},[26,27,28],"strong",{},"Universal JS server","：支援 SSR、static 等多種渲染模式",[23,31,32,35,36,40,41,44],{},[26,33,34],{},"File-based routing","：自動將 ",[37,38,39],"code",{},"server\u002Fapi","、",[37,42,43],{},"server\u002Fmiddleware"," 轉為 HTTP Route",[23,46,47,50],{},[26,48,49],{},"多平台部署","：支援 Netlify、Vercel、Cloudflare Workers 等多種平台",[23,52,53,56],{},[26,54,55],{},"獨立打包","：將伺服器邏輯打包成單一檔案，部署不需額外程式碼",[23,58,59,62],{},[26,60,61],{},"自動程式碼分割","：每個 API route\u002Fmiddleware 可獨立分割，提升效能",[23,64,65,68],{},[26,66,67],{},"Storage Layer","：可存取靜態檔案系統、Database、Redis 等等",[23,70,71,74],{},[26,72,73],{},"Caching System","：在 Storage Layer 之上提供快取機制",[16,76,77],{},"這些設計讓 Nuxt 能在不犧牲開發體驗下，輕鬆部署到各種現代雲端平台。",[11,79,81],{"id":80},"h3支撐-nitro-的極簡-http-核心","H3：支撐 Nitro 的極簡 HTTP 核心",[16,83,84],{},"H3 是 Nitro 內部使用的極簡 HTTP 框架，專為現代全端與 Serverless 應用設計。其核心特點：",[20,86,87,93,99,105],{},[23,88,89,92],{},[26,90,91],{},"極簡、快速、可樹搖 (tree-shakable)","：比 Express 更輕量、啟動更快",[23,94,95,98],{},[26,96,97],{},"零額外依賴","：避免傳統框架的龐大依賴鏈",[23,100,101,104],{},[26,102,103],{},"Composable 工具設計","：每個功能都是獨立工具函數，可按需引入，與 Vue 3 Composition API 風格一致",[23,106,107,110,111,40,114,40,117,120],{},[26,108,109],{},"豐富內建工具","：如 ",[37,112,113],{},"readBody",[37,115,116],{},"getQuery",[37,118,119],{},"setCookie"," 等，直接用於 Nuxt 事件處理器",[122,123,124],"h3",{"id":124},"內建工具範例",[126,127,132],"pre",{"className":128,"code":129,"language":130,"meta":131,"style":131},"language-ts shiki shiki-themes material-theme-lighter github-light github-dark","export default defineEventHandler(async (event) => {\n  const body = await readBody(event); \u002F\u002F 讀取請求主體\n  const query = getQuery(event); \u002F\u002F 取得查詢參數\n  setCookie(event, \"session\", \"abc123\"); \u002F\u002F 設定 Cookie\n  return { body, query };\n});\n","ts","",[37,133,134,175,209,233,273,291],{"__ignoreMap":131},[135,136,139,143,146,150,154,158,162,166,169,172],"span",{"class":137,"line":138},"line",1,[135,140,142],{"class":141},"sVHd0","export",[135,144,145],{"class":141}," default",[135,147,149],{"class":148},"sGLFI"," defineEventHandler",[135,151,153],{"class":152},"su5hD","(",[135,155,157],{"class":156},"sbsja","async",[135,159,161],{"class":160},"sP7_E"," (",[135,163,165],{"class":164},"s99_P","event",[135,167,168],{"class":160},")",[135,170,171],{"class":156}," =>",[135,173,174],{"class":160}," {\n",[135,176,178,181,185,189,192,195,198,200,202,205],{"class":137,"line":177},2,[135,179,180],{"class":156},"  const",[135,182,184],{"class":183},"s_hVV"," body",[135,186,188],{"class":187},"smGrS"," =",[135,190,191],{"class":141}," await",[135,193,194],{"class":148}," readBody",[135,196,153],{"class":197},"skxfh",[135,199,165],{"class":152},[135,201,168],{"class":197},[135,203,204],{"class":160},";",[135,206,208],{"class":207},"sutJx"," \u002F\u002F 讀取請求主體\n",[135,210,212,214,217,219,222,224,226,228,230],{"class":137,"line":211},3,[135,213,180],{"class":156},[135,215,216],{"class":183}," query",[135,218,188],{"class":187},[135,220,221],{"class":148}," getQuery",[135,223,153],{"class":197},[135,225,165],{"class":152},[135,227,168],{"class":197},[135,229,204],{"class":160},[135,231,232],{"class":207}," \u002F\u002F 取得查詢參數\n",[135,234,236,239,241,243,246,250,254,257,259,261,264,266,268,270],{"class":137,"line":235},4,[135,237,238],{"class":148},"  setCookie",[135,240,153],{"class":197},[135,242,165],{"class":152},[135,244,245],{"class":160},",",[135,247,249],{"class":248},"sjJ54"," \"",[135,251,253],{"class":252},"s_sjI","session",[135,255,256],{"class":248},"\"",[135,258,245],{"class":160},[135,260,249],{"class":248},[135,262,263],{"class":252},"abc123",[135,265,256],{"class":248},[135,267,168],{"class":197},[135,269,204],{"class":160},[135,271,272],{"class":207}," \u002F\u002F 設定 Cookie\n",[135,274,276,279,282,284,286,288],{"class":137,"line":275},5,[135,277,278],{"class":141},"  return",[135,280,281],{"class":160}," {",[135,283,184],{"class":152},[135,285,245],{"class":160},[135,287,216],{"class":152},[135,289,290],{"class":160}," };\n",[135,292,294,297,299],{"class":137,"line":293},6,[135,295,296],{"class":160},"}",[135,298,168],{"class":152},[135,300,301],{"class":160},";\n",[20,303,304,310,316],{},[23,305,306,309],{},[26,307,308],{},"現代 JS 支援","：原生 async\u002Fawait、ESM",[23,311,312,315],{},[26,313,314],{},"Serverless \u002F Edge Function 最佳化","：冷啟動極快，跨平台相容",[23,317,318,321,322,40,325,328],{},[26,319,320],{},"完整 Node.js 支援","：可直接存取 ",[37,323,324],{},"event.node.req",[37,326,327],{},"event.node.res"," 等",[11,330,332],{"id":331},"nitro-與-h3-的關係","Nitro 與 H3 的關係",[20,334,335,341,350],{},[23,336,337,340],{},[26,338,339],{},"Nitro 是高階伺服器引擎","，HTTP 處理完全建構於 H3 之上",[23,342,343,349],{},[26,344,345,346,348],{},"開發者在 ",[37,347,39],{},"、middleware 中操作的 event 物件","，即來自 H3",[23,351,352,358],{},[26,353,354,355,168],{},"Nuxt plugin (",[37,356,357],{},"defineNitroPlugin","，會註冊到 H3 的 middleware stack",[122,360,362],{"id":361},"範例在-nuxt-中自訂-api-route-中的-h3-event","範例：在 Nuxt 中自訂 API route 中的 H3 event",[126,364,366],{"className":128,"code":365,"language":130,"meta":131,"style":131},"\u002F\u002F server\u002Fapi\u002Fhello.ts\nexport default defineEventHandler((event) => {\n  const ua = event.node.req.headers[\"user-agent\"];\n  return { message: `Hello! You are using ${ua}` };\n});\n",[37,367,368,373,393,436,465],{"__ignoreMap":131},[135,369,370],{"class":137,"line":138},[135,371,372],{"class":207},"\u002F\u002F server\u002Fapi\u002Fhello.ts\n",[135,374,375,377,379,381,383,385,387,389,391],{"class":137,"line":177},[135,376,142],{"class":141},[135,378,145],{"class":141},[135,380,149],{"class":148},[135,382,153],{"class":152},[135,384,153],{"class":160},[135,386,165],{"class":164},[135,388,168],{"class":160},[135,390,171],{"class":156},[135,392,174],{"class":160},[135,394,395,397,400,402,405,408,411,413,416,418,421,424,426,429,431,434],{"class":137,"line":211},[135,396,180],{"class":156},[135,398,399],{"class":183}," ua",[135,401,188],{"class":187},[135,403,404],{"class":152}," event",[135,406,407],{"class":160},".",[135,409,410],{"class":152},"node",[135,412,407],{"class":160},[135,414,415],{"class":152},"req",[135,417,407],{"class":160},[135,419,420],{"class":152},"headers",[135,422,423],{"class":197},"[",[135,425,256],{"class":248},[135,427,428],{"class":252},"user-agent",[135,430,256],{"class":248},[135,432,433],{"class":197},"]",[135,435,301],{"class":160},[135,437,438,440,442,445,448,451,454,457,460,463],{"class":137,"line":235},[135,439,278],{"class":141},[135,441,281],{"class":160},[135,443,444],{"class":197}," message",[135,446,447],{"class":160},":",[135,449,450],{"class":248}," `",[135,452,453],{"class":252},"Hello! You are using ",[135,455,456],{"class":248},"${",[135,458,459],{"class":152},"ua",[135,461,462],{"class":248},"}`",[135,464,290],{"class":160},[135,466,467,469,471],{"class":137,"line":275},[135,468,296],{"class":160},[135,470,168],{"class":152},[135,472,301],{"class":160},[11,474,475],{"id":475},"延伸閱讀",[122,477,479],{"id":478},"unjs-生態系","UnJS 生態系",[16,481,482,489],{},[483,484,488],"a",{"href":485,"rel":486},"https:\u002F\u002FUnJS.io\u002F",[487],"nofollow","🔗 UnJS"," 是一組現代 JavaScript 工具包，專為 Universal JS 應用設計。包含上述提到的 Nitro、H3，以及 Nuxt 中常用的 $fetch 等。",[122,491,492],{"id":492},"官方文檔",[16,494,495],{},[483,496,499],{"href":497,"rel":498},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fguide\u002Fconcepts\u002Fserver-engine",[487],"🔗 Server Engine | Nuxt Concepts",[11,501,502],{"id":502},"結論",[20,504,505,511,517],{},[23,506,507,510],{},[26,508,509],{},"H3"," 是 Nitro 的基礎 HTTP 框架，極簡高效",[23,512,513,516],{},[26,514,515],{},"Nitro"," 將 H3 擴充為完整伺服器引擎，支援 SSR 與多平台部署",[23,518,519,521],{},[26,520,479],{}," 提供現代 JS 應用的基礎建設，讓 Nuxt 更靈活高效",[16,523,524],{},"這套架構讓 Nuxt 3 在伺服器端開發上，既能享受 Vue 3 的 Composition API 優勢，也因為 Nitro 與 H3 的模組化、靈活部署、自動分割、快取與 storage layer 等設計，讓專案在逐漸擴大或需要重構時，能大幅降低複雜度與開發門檻，並在部署上獲得極大的靈活性與效能提升。無論是 API 開發、SSR 還是 Serverless 應用，Nitro 與 H3 都提供了現代全端開發的最佳支援。",[16,526,527],{},"若希望自行設計中介層邏輯、存取資料層或自建 API 的開發者，理解 Nitro 與 H3 的運作方式將有助於更有效地控制伺服器行為與資源配置。",[529,530,531],"style",{},"html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sbsja, html code.shiki .sbsja{--shiki-light:#9C3EDA;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s99_P, html code.shiki .s99_P{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#E36209;--shiki-default-font-style:inherit;--shiki-dark:#FFAB70;--shiki-dark-font-style:inherit}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .skxfh, html code.shiki .skxfh{--shiki-light:#E53935;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":131,"searchDepth":211,"depth":211,"links":533},[534,535,538,541,545],{"id":13,"depth":177,"text":14},{"id":80,"depth":177,"text":81,"children":536},[537],{"id":124,"depth":211,"text":124},{"id":331,"depth":177,"text":332,"children":539},[540],{"id":361,"depth":211,"text":362},{"id":475,"depth":177,"text":475,"children":542},[543,544],{"id":478,"depth":211,"text":479},{"id":492,"depth":211,"text":492},{"id":502,"depth":177,"text":502},"Nuxt","2025-06-04","快速了解 Nuxt 3 中的 Nitro 與 H3，如何讓後端開發更簡單高效，並支援多平台部署。",false,"md",null,{},true,"\u002Fblog\u002Fnuxt\u002Fnuxt-server-engine-nitro-h3",{"title":5,"description":548},"blog\u002Fnuxt\u002Fnuxt-server-engine-nitro-h3",[546,515,509,558],"UnJS","o3IwF9Vaz90CZSIACVZlvHjdVNXbkXjcAGDZIhVHjTk",1780512500639]