[{"data":1,"prerenderedAt":1023},["ShallowReactive",2],{"navigation_docs":3,"-nuxt-nitro":352,"-nuxt-nitro-surround":1018},[4,54,83,116,125,161,179,200],{"title":5,"path":6,"stem":7,"children":8},"Ai","/ai","ai",[9,12,42,46,50],{"title":10,"path":6,"stem":11},"AI 技術探索","ai/index",{"title":13,"path":14,"stem":15,"children":16,"page":41},"Rag","/ai/rag","ai/RAG",[17,21,25,29,33,37],{"title":18,"path":19,"stem":20},"BM25 演算法深入解析：從 TF-IDF 到現代搜尋引擎的核心技術","/ai/rag/bm25-deep-dive-from-tf-idf-to-rag","ai/RAG/bm25-deep-dive-from-tf-idf-to-rag",{"title":22,"path":23,"stem":24},"Dense Retrieval（向量檢索）深入解析","/ai/rag/dense-retrieval-deep-dive","ai/RAG/dense-retrieval-deep-dive",{"title":26,"path":27,"stem":28},"RAG（Retrieval-Augmented Generation）原理與實作入門","/ai/rag/rag-intro-principles-and-implementation","ai/RAG/rag-intro-principles-and-implementation",{"title":30,"path":31,"stem":32},"RAG Retrieval Strategy 深入解析","/ai/rag/rag-retrieval-strategy-deep-dive","ai/RAG/rag-retrieval-strategy-deep-dive",{"title":34,"path":35,"stem":36},"Reciprocal Rank Fusion（RRF）教學：打造更穩定的檢索融合策略","/ai/rag/rrf-reciprocal-rank-fusion-guide","ai/RAG/rrf-reciprocal-rank-fusion-guide",{"title":38,"path":39,"stem":40},"TF-IDF（Term Frequency–Inverse Document Frequency）深入解析","/ai/rag/tf-idf-deep-dive","ai/RAG/tf-idf-deep-dive",false,{"title":43,"path":44,"stem":45},"Docus AI 功能完整實作指南","/ai/docus-ai-implementation","ai/docus-ai-implementation",{"title":47,"path":48,"stem":49},"llms.txt 是什麼？在 Nuxt 中控制 AI 與搜尋引擎爬蟲的新方式","/ai/llms-txt","ai/llms-txt",{"title":51,"path":52,"stem":53},"MCP（Model Context Protocol）是什麼？用「AI 的 USB-C」理解模型如何安全連接工具與資料","/ai/mcp_concept","ai/mcp_concept",{"title":55,"path":56,"stem":57,"children":58,"page":41},"Data Analysis","/data-analysis","data-analysis",[59,63,67,71,75,79],{"title":60,"path":61,"stem":62},"Exploratory Data Analysis（EDA）資料探索分析入門","/data-analysis/exploratory-data-analysis-eda","data-analysis/exploratory-data-analysis-eda",{"title":64,"path":65,"stem":66},"PR-AUC 深入解析：不平衡分類問題的重要評估指標","/data-analysis/pr-auc-for-imbalanced-classification","data-analysis/pr-auc-for-imbalanced-classification",{"title":68,"path":69,"stem":70},"ROC-AUC 深入解析：理解分類模型的判斷能力","/data-analysis/roc-auc-complete-guide","data-analysis/roc-auc-complete-guide",{"title":72,"path":73,"stem":74},"SHAP（SHapley Additive exPlanations）模型解釋方法深入解析","/data-analysis/shap-model-interpretation-complete-guide","data-analysis/shap-model-interpretation-complete-guide",{"title":76,"path":77,"stem":78},"Social Network Analysis（SNA）深入解析","/data-analysis/social-network-analysis-sna","data-analysis/social-network-analysis-sna",{"title":80,"path":81,"stem":82},"Time-based Split：為什麼時間序列資料不能使用 Random Split？","/data-analysis/time-based-split-vs-random-split","data-analysis/time-based-split-vs-random-split",{"title":84,"path":85,"stem":86,"children":87,"page":41},"MachineLearning","/machine_learning","machine_learning",[88,92,96,100,104,108,112],{"title":89,"path":90,"stem":91},"Confusion Matrix（混淆矩陣）完整解析","/machine_learning/confusion-matrix","machine_learning/confusion-matrix",{"title":93,"path":94,"stem":95},"Decision Tree 模型完整教學：從原理到 Python 實作","/machine_learning/decision-tree-complete-guide","machine_learning/decision-tree-complete-guide",{"title":97,"path":98,"stem":99},"為什麼 Decision Tree 在 Tabular Data 上常常勝過 Deep Learning？","/machine_learning/decision-tree-vs-deep-learning-on-tabular-data","machine_learning/decision-tree-vs-deep-learning-on-tabular-data",{"title":101,"path":102,"stem":103},"LightGBM 模型入門：理解高效能的 Gradient Boosting 演算法","/machine_learning/lightgbm-intro-for-tabular-data","machine_learning/lightgbm-intro-for-tabular-data",{"title":105,"path":106,"stem":107},"Logistic Regression（Logit 回歸）完整教學","/machine_learning/logistic-regression-complete-guide","machine_learning/logistic-regression-complete-guide",{"title":109,"path":110,"stem":111},"為什麼模型訓練需要 Train / Validation / Test Dataset？","/machine_learning/train-validation-test-dataset","machine_learning/train-validation-test-dataset",{"title":113,"path":114,"stem":115},"XGBoost 原理與實務教學","/machine_learning/xgboost-complete-guide","machine_learning/xgboost-complete-guide",{"title":117,"path":118,"stem":119,"children":120,"page":41},"Network","/network","network",[121],{"title":122,"path":123,"stem":124},"DNS 設定入門：CNAME vs A Record 完整解析","/network/dns-cname-vs-a-record-guide","network/dns-cname-vs-a-record-guide",{"title":126,"path":127,"stem":128,"children":129},"Nuxt","/nuxt","nuxt",[130,133,137,141,145,149,153,157],{"title":131,"path":127,"stem":132},"Nuxt 實戰指南","nuxt/index",{"title":134,"path":135,"stem":136},"Abstraction Layer 與 Adapter 的差別，一次搞懂設計角色","/nuxt/adapter_abstraction_layer","nuxt/adapter_abstraction_layer",{"title":138,"path":139,"stem":140},"Nuxt 4 全面理解 — 專案檔案結構解析","/nuxt/directory_structure","nuxt/directory_structure",{"title":142,"path":143,"stem":144},"Nuxt 前端 build 流程完整解析","/nuxt/frontend_build","nuxt/frontend_build",{"title":146,"path":147,"stem":148},"Nitro 是什麼？從 Nuxt 專案到 Server 與 Edge 的關鍵引擎","/nuxt/nitro","nuxt/nitro",{"title":150,"path":151,"stem":152},"深入理解 Nuxt 的 .nuxt 與 .output：為什麼部署時一定要分清楚？","/nuxt/nuxt_and_output","nuxt/nuxt_and_output",{"title":154,"path":155,"stem":156},"Nuxt 中 dev、build、preview 的差異一次搞懂","/nuxt/nuxt_dev_build_preview","nuxt/nuxt_dev_build_preview",{"title":158,"path":159,"stem":160},"Nuxt Image vs \u003Cimg>：為什麼 Nuxt 3 專案幾乎都該用 \u003CNuxtImg>？","/nuxt/nuxt_image","nuxt/nuxt_image",{"title":162,"path":163,"stem":164,"children":165},"Python 程式開發","/python","python/index",[166,167,171,175],{"title":162,"path":163,"stem":164},{"title":168,"path":169,"stem":170},"如何在 FastAPI 中調用記憶體 Buffer 回傳圖片 (附實例)","/python/memory_buffer","python/memory_buffer",{"title":172,"path":173,"stem":174},"Python 單元測試教學：如何為你的程式撰寫 Test","/python/python-unit-testing-unittest-pytest","python/python-unit-testing-unittest-pytest",{"title":176,"path":177,"stem":178},"如何使用 uv 取代 pip：改善 Python 專案的開發流程","/python/uv","python/uv",{"title":180,"path":181,"stem":182,"children":183,"page":41},"Statistic","/statistic","statistic",[184,188,192,196],{"title":185,"path":186,"stem":187},"卡方檢定（Chi-Square Test）入門教學","/statistic/chi-square-test-intro","statistic/chi-square-test-intro",{"title":189,"path":190,"stem":191},"常見抽樣方法（Sampling Methods）教學：Stratified、Quota、Convenience、Systematic、Simple Random","/statistic/common-sampling-methods-guide","statistic/common-sampling-methods-guide",{"title":193,"path":194,"stem":195},"Cramér’s V 指標介紹：如何衡量兩個類別變數之間的關聯","/statistic/cramers-v-for-categorical-association","statistic/cramers-v-for-categorical-association",{"title":197,"path":198,"stem":199},"Mann–Whitney U 與 Kolmogorov–Smirnov（KS）檢定：非參數統計檢定的入門指南","/statistic/mann-whitney-u-and-ks-test-intro","statistic/mann-whitney-u-and-ks-test-intro",{"title":201,"path":202,"stem":203,"children":204},"WebDev","/web_dev","web_dev",[205,208,234,248,282,312,334],{"title":206,"path":202,"stem":207},"Web 前端開發","web_dev/index",{"title":209,"path":210,"stem":211,"children":212},"瀏覽器與渲染","/web_dev/browser","web_dev/browser/index",[213,214,218,222,226,230],{"title":209,"path":210,"stem":211},{"title":215,"path":216,"stem":217},"瀏覽器儲存空間完整解析：Cookie、localStorage、IndexedDB 到 Cache Storage","/web_dev/browser/browser-storage-comprehensive-guide","web_dev/browser/browser-storage-comprehensive-guide",{"title":219,"path":220,"stem":221},"DOM (Document Object Model) 深入解析","/web_dev/browser/dom","web_dev/browser/dom",{"title":223,"path":224,"stem":225},"Service Worker Request Flow 深入解析","/web_dev/browser/service-worker-request-flow","web_dev/browser/service-worker-request-flow",{"title":227,"path":228,"stem":229},"CSR、SSR 與 SSG 是什麼？前端渲染策略完整比較","/web_dev/browser/ssr_csr_ssg","web_dev/browser/ssr_csr_ssg",{"title":231,"path":232,"stem":233},"Virtual DOM 深入解析：為什麼它能優化前端效能？","/web_dev/browser/virtual_dom","web_dev/browser/virtual_dom",{"title":235,"path":236,"stem":237,"children":238},"圖形技術","/web_dev/graphics","web_dev/graphics/index",[239,240,244],{"title":235,"path":236,"stem":237},{"title":241,"path":242,"stem":243},"為什麼 Three.js 專案幾乎都選擇 CSR？從 SSR 問題談起","/web_dev/graphics/threejs_csr","web_dev/graphics/threejs_csr",{"title":245,"path":246,"stem":247},"WebGL 是什麼？為什麼前端 3D 幾乎都靠它？","/web_dev/graphics/webgl","web_dev/graphics/webGL",{"title":249,"path":250,"stem":251,"children":252},"架構與配置","/web_dev/infrastructure","web_dev/infrastructure/index",[253,254,258,262,266,270,274,278],{"title":249,"path":250,"stem":251},{"title":255,"path":256,"stem":257},"Zeabur + K3s + Nuxt 部署架構完整解析","/web_dev/infrastructure/k3s-zeabur","web_dev/infrastructure/K3s-zeabur",{"title":259,"path":260,"stem":261},"ECS vs Docker vs Kubernetes：從部署堆疊理解三層架構","/web_dev/infrastructure/ecs-docker-kubernetes-stack","web_dev/infrastructure/ecs-docker-kubernetes-stack",{"title":263,"path":264,"stem":265},"ECS vs VPS 是什麼？從部署網站的角度一次搞懂差別","/web_dev/infrastructure/ecs-vs-vps","web_dev/infrastructure/ecs-vs-vps",{"title":267,"path":268,"stem":269},"Zeabur 內網服務連線完整入門指南","/web_dev/infrastructure/k3s-internal-networking","web_dev/infrastructure/k3s-internal-networking",{"title":271,"path":272,"stem":273},"使用 Microservices 架構設計系統的優勢解析","/web_dev/infrastructure/microservices-architecture-advantages","web_dev/infrastructure/microservices-architecture-advantages",{"title":275,"path":276,"stem":277},"Nginx 入門教學：從反向代理到與 Kubernetes 的架構比較","/web_dev/infrastructure/nginx-intro","web_dev/infrastructure/nginx-intro",{"title":279,"path":280,"stem":281},"YAML 配置是什麼？為什麼現代開發都在用它","/web_dev/infrastructure/yaml-configuration","web_dev/infrastructure/yaml-configuration",{"title":283,"path":284,"stem":285,"children":286},"網絡與通訊","/web_dev/network","web_dev/network/index",[287,288,292,296,300,304,308],{"title":283,"path":284,"stem":285},{"title":289,"path":290,"stem":291},"HTTP Request 結構完整解析：從 Request Line 到 Header 一次看懂","/web_dev/network/http-request-structure","web_dev/network/http-request-structure",{"title":293,"path":294,"stem":295},"OSI 模型（Open Systems Interconnection Model）完整解析","/web_dev/network/osi-model","web_dev/network/osi-model",{"title":297,"path":298,"stem":299},"RESTful API 設計原則與實務解析","/web_dev/network/restful-api","web_dev/network/restful-api",{"title":301,"path":302,"stem":303},"RESTful API 五大設計原則深入解析","/web_dev/network/restful-api-principles","web_dev/network/restful-api-principles",{"title":305,"path":306,"stem":307},"Server-Sent Events (SSE) 深入解析與實作教學","/web_dev/network/sse-introduction","web_dev/network/sse-introduction",{"title":309,"path":310,"stem":311},"WebSocket 入門教學：從概念到 Node.js 實作","/web_dev/network/websocket-introduction","web_dev/network/websocket-introduction",{"title":313,"path":314,"stem":315,"children":316},"認證與安全","/web_dev/security","web_dev/security/index",[317,318,322,326,330],{"title":313,"path":314,"stem":315},{"title":319,"path":320,"stem":321},"使用 Cookie 與 Session 建立使用者驗證（完整新手教學）","/web_dev/security/cookie-session-authentication","web_dev/security/cookie-session-authentication",{"title":323,"path":324,"stem":325},"JWT 驗證機制完整解析：從登入流程到實務應用","/web_dev/security/jwt-authentication","web_dev/security/jwt-authentication",{"title":327,"path":328,"stem":329},"Secret Key 簽名是什麼？從零理解資料簽名的本質","/web_dev/security/secret-key-signing","web_dev/security/secret-key-signing",{"title":331,"path":332,"stem":333},"SSH（Secure Shell）是什麼？從遠端登入到安全通道的核心概念","/web_dev/security/ssh","web_dev/security/ssh",{"title":335,"path":336,"stem":337,"children":338},"SEO 與規範","/web_dev/seo","web_dev/seo/index",[339,340,344,348],{"title":335,"path":336,"stem":337},{"title":341,"path":342,"stem":343},"Canonical URL 是什麼？用生活化方式搞懂前端 SEO 的基本保命符","/web_dev/seo/canonical_link","web_dev/seo/canonical_link",{"title":345,"path":346,"stem":347},"robots.txt 是什麼？SEO 的第一道守門員","/web_dev/seo/robot_txt","web_dev/seo/robot_txt",{"title":349,"path":350,"stem":351},"Nuxt SEO 中的 Meta 與 SEO 工具是如何運作的？","/web_dev/seo/seo","web_dev/seo/seo",{"id":353,"title":146,"body":354,"description":1006,"extension":1007,"links":1008,"meta":1009,"navigation":1015,"path":147,"seo":1016,"stem":148,"__hash__":1017},"docs/nuxt/nitro.md",{"type":355,"value":356,"toc":995},"minimark",[357,362,371,378,381,384,387,391,397,400,403,414,420,422,426,433,495,498,518,525,527,531,534,537,540,602,614,617,629,682,691,697,699,703,706,709,758,765,777,780,812,815,820,822,826,829,832,893,896,913,919,921,925,931,934,942,945,947,951,954,957,960,962,966,969,985,991],[358,359,361],"h2",{"id":360},"什麼是-nitro先用一句話抓住定位","什麼是 Nitro？先用一句話抓住定位",[363,364,365,366,370],"p",{},"在 Nuxt 的世界裡，Nitro 並不是一個你「額外選用」的工具，而是從 Nuxt 3 開始就",[367,368,369],"strong",{},"內建在核心架構中的伺服器引擎","。",[363,372,373,374,377],{},"更精確地說，",[367,375,376],{},"Nitro 負責把你寫好的 Nuxt 專案，轉換成「實際能被部署平台執行的 Server 應用」","。\n你在專案裡寫的 API、SSR 邏輯、Server middleware，最後都會交給 Nitro 統一處理。",[363,379,380],{},"因此可以這樣理解角色分工：",[363,382,383],{},"Nuxt 關心的是「你怎麼寫程式會最舒服」，\nNitro 關心的是「這些程式最後要怎麼跑、跑在哪裡」。",[385,386],"hr",{},[358,388,390],{"id":389},"nitro-在-nuxt-架構中的位置","Nitro 在 Nuxt 架構中的位置",[363,392,393,394,370],{},"理解 Nitro，關鍵不在於它「做了什麼功能」，而是它",[367,395,396],{},"站在架構中的哪一層",[363,398,399],{},"當你寫一個 Nuxt 專案時，實際上中間會多出一層你平常很少直接碰觸的轉換層，那一層就是 Nitro。",[363,401,402],{},"概念上可以這樣想：",[404,405,410],"pre",{"className":406,"code":408,"language":409},[407],"language-text","你寫的頁面、元件、server 檔案\n↓\nNuxt（路由、SSR、資料流、DX）\n↓\nNitro（Server Runtime、平台適配）\n↓\n實際部署環境（Node / Serverless / Edge）\n","text",[411,412,408],"code",{"__ignoreMap":413},"",[363,415,416,417],{},"這代表一件很重要的事：\n",[367,418,419],{},"你寫的 server code 並不是直接在 Node 或 Edge 上執行，而是先進入 Nitro 的 runtime。",[385,421],{},[358,423,425],{"id":424},"從一個最基本的-server-api-看-nitro-的存在","從一個最基本的 server API 看 Nitro 的存在",[363,427,428,429,432],{},"在 Nuxt 中，你可以在 ",[411,430,431],{},"server/api"," 資料夾建立 API：",[404,434,438],{"className":435,"code":436,"language":437,"meta":413,"style":413},"language-ts shiki shiki-themes github-dark","// server/api/hello.ts\nexport default defineEventHandler(() => {\n  return { message: \"Hello from Nitro\" };\n});\n","ts",[411,439,440,449,473,489],{"__ignoreMap":413},[441,442,445],"span",{"class":443,"line":444},"line",1,[441,446,448],{"class":447},"sAwPA","// server/api/hello.ts\n",[441,450,452,456,459,463,467,470],{"class":443,"line":451},2,[441,453,455],{"class":454},"snl16","export",[441,457,458],{"class":454}," default",[441,460,462],{"class":461},"svObZ"," defineEventHandler",[441,464,466],{"class":465},"s95oV","(() ",[441,468,469],{"class":454},"=>",[441,471,472],{"class":465}," {\n",[441,474,476,479,482,486],{"class":443,"line":475},3,[441,477,478],{"class":454},"  return",[441,480,481],{"class":465}," { message: ",[441,483,485],{"class":484},"sU2Wk","\"Hello from Nitro\"",[441,487,488],{"class":465}," };\n",[441,490,492],{"class":443,"line":491},4,[441,493,494],{"class":465},"});\n",[363,496,497],{},"從使用者的角度來看，這只是一個 API。\n但從執行流程來看，事情其實是這樣發生的：",[499,500,501,509,512,515],"ol",{},[502,503,504,505,508],"li",{},"Nuxt 在 build 時掃描 ",[411,506,507],{},"server/"," 目錄",[502,510,511],{},"Nitro 收集所有 server handlers",[502,513,514],{},"Nitro 把它們包裝成符合目標平台的 server 程式",[502,516,517],{},"部署後，請求才真正進到這段程式碼",[363,519,520,521,524],{},"也就是說，",[367,522,523],{},"這個 handler 並不是「Node 原生 API」","，而是由 Nitro 接管的請求流程。",[385,526],{},[358,528,530],{"id":529},"nitro-為什麼不是-express-fastify","Nitro 為什麼不是 Express / Fastify？",[363,532,533],{},"很多人在這裡會出現誤解，因為 Express、Fastify 也都是「處理 HTTP 請求」。",[363,535,536],{},"但 Nitro 的出發點完全不同。",[363,538,539],{},"Express 的世界裡，你一定會看到這種寫法：",[404,541,545],{"className":542,"code":543,"language":544,"meta":413,"style":413},"language-js shiki shiki-themes github-dark","app.get(\"/api/hello\", (req, res) => {\n  res.json({ hello: \"world\" });\n});\n","js",[411,546,547,581,598],{"__ignoreMap":413},[441,548,549,552,555,558,561,564,568,571,574,577,579],{"class":443,"line":444},[441,550,551],{"class":465},"app.",[441,553,554],{"class":461},"get",[441,556,557],{"class":465},"(",[441,559,560],{"class":484},"\"/api/hello\"",[441,562,563],{"class":465},", (",[441,565,567],{"class":566},"s9osk","req",[441,569,570],{"class":465},", ",[441,572,573],{"class":566},"res",[441,575,576],{"class":465},") ",[441,578,469],{"class":454},[441,580,472],{"class":465},[441,582,583,586,589,592,595],{"class":443,"line":451},[441,584,585],{"class":465},"  res.",[441,587,588],{"class":461},"json",[441,590,591],{"class":465},"({ hello: ",[441,593,594],{"class":484},"\"world\"",[441,596,597],{"class":465}," });\n",[441,599,600],{"class":443,"line":475},[441,601,494],{"class":465},[363,603,604,605],{},"這種寫法有一個前提：\n👉 ",[367,606,607,608,610,611,613],{},"你一定跑在 Node.js，而且一定有 ",[411,609,567],{}," / ",[411,612,573],{}," 這組 API。",[363,615,616],{},"但在 Edge Runtime（例如 Cloudflare Workers）裡，這些 API 是不存在的。",[363,618,619,620,610,622,624,625,628],{},"因此 Nitro 採取了一個更底層、也更抽象的設計方式：\n它不暴露 ",[411,621,567],{},[411,623,573],{},"，而是提供一個跨平台的 ",[411,626,627],{},"event"," 物件。",[404,630,632],{"className":435,"code":631,"language":437,"meta":413,"style":413},"export default defineEventHandler((event) => {\n  const query = getQuery(event);\n  return query;\n});\n",[411,633,634,653,671,678],{"__ignoreMap":413},[441,635,636,638,640,642,645,647,649,651],{"class":443,"line":444},[441,637,455],{"class":454},[441,639,458],{"class":454},[441,641,462],{"class":461},[441,643,644],{"class":465},"((",[441,646,627],{"class":566},[441,648,576],{"class":465},[441,650,469],{"class":454},[441,652,472],{"class":465},[441,654,655,658,662,665,668],{"class":443,"line":451},[441,656,657],{"class":454},"  const",[441,659,661],{"class":660},"sDLfK"," query",[441,663,664],{"class":454}," =",[441,666,667],{"class":461}," getQuery",[441,669,670],{"class":465},"(event);\n",[441,672,673,675],{"class":443,"line":475},[441,674,478],{"class":454},[441,676,677],{"class":465}," query;\n",[441,679,680],{"class":443,"line":491},[441,681,494],{"class":465},[363,683,684,685,687,688,370],{},"這裡的 ",[411,686,627],{},"，不是 Node 的 request，\n而是 ",[367,689,690],{},"Nitro 封裝後的「請求事件模型」",[363,692,693,694],{},"正因為這層抽象存在，",[367,695,696],{},"同一份 server code 才能同時跑在 Node 與 Edge。",[385,698],{},[358,700,702],{"id":701},"nitro-如何讓同一份專案跑在不同部署環境","Nitro 如何讓同一份專案跑在不同部署環境？",[363,704,705],{},"這是 Nitro 最實際、也最有價值的地方。",[363,707,708],{},"在 Nuxt 中，你不需要為不同平台重寫 server 程式，只需要在設定檔中告訴 Nitro 目標環境是什麼。",[404,710,712],{"className":435,"code":711,"language":437,"meta":413,"style":413},"// nuxt.config.ts\nexport default defineNuxtConfig({\n  nitro: {\n    preset: \"vercel\",\n  },\n});\n",[411,713,714,719,731,736,747,753],{"__ignoreMap":413},[441,715,716],{"class":443,"line":444},[441,717,718],{"class":447},"// nuxt.config.ts\n",[441,720,721,723,725,728],{"class":443,"line":451},[441,722,455],{"class":454},[441,724,458],{"class":454},[441,726,727],{"class":461}," defineNuxtConfig",[441,729,730],{"class":465},"({\n",[441,732,733],{"class":443,"line":475},[441,734,735],{"class":465},"  nitro: {\n",[441,737,738,741,744],{"class":443,"line":491},[441,739,740],{"class":465},"    preset: ",[441,742,743],{"class":484},"\"vercel\"",[441,745,746],{"class":465},",\n",[441,748,750],{"class":443,"line":749},5,[441,751,752],{"class":465},"  },\n",[441,754,756],{"class":443,"line":755},6,[441,757,494],{"class":465},[363,759,760,761,764],{},"當你指定 ",[411,762,763],{},"vercel"," 時，Nitro 會在 build 階段：",[766,767,768,771,774],"ul",{},[502,769,770],{},"把 server handlers 轉成 Serverless Functions",[502,772,773],{},"處理平台限制（例如冷啟動、檔案系統）",[502,775,776],{},"輸出符合 Vercel 規範的結構",[363,778,779],{},"如果你改成：",[404,781,783],{"className":435,"code":782,"language":437,"meta":413,"style":413},"nitro: {\n  preset: \"cloudflare\";\n}\n",[411,784,785,793,807],{"__ignoreMap":413},[441,786,787,790],{"class":443,"line":444},[441,788,789],{"class":461},"nitro",[441,791,792],{"class":465},": {\n",[441,794,795,798,801,804],{"class":443,"line":451},[441,796,797],{"class":461},"  preset",[441,799,800],{"class":465},": ",[441,802,803],{"class":484},"\"cloudflare\"",[441,805,806],{"class":465},";\n",[441,808,809],{"class":443,"line":475},[441,810,811],{"class":465},"}\n",[363,813,814],{},"那麼同一份程式碼，會被轉成可在 Cloudflare Workers 上執行的格式。",[363,816,817],{},[367,818,819],{},"你寫的不是「Vercel API」或「Cloudflare API」，而是「Nitro API」。",[385,821],{},[358,823,825],{"id":824},"nitro-與-ssr-的關係","Nitro 與 SSR 的關係",[363,827,828],{},"當你在 Nuxt 中使用 SSR 時，實際上也是 Nitro 在負責執行伺服器端渲染。",[363,830,831],{},"例如一個頁面：",[404,833,837],{"className":834,"code":835,"language":836,"meta":413,"style":413},"language-vue shiki shiki-themes github-dark","\u003Cscript setup>\nconst { data } = await useFetch(\"/api/hello\");\n\u003C/script>\n","vue",[411,838,839,854,884],{"__ignoreMap":413},[441,840,841,844,848,851],{"class":443,"line":444},[441,842,843],{"class":465},"\u003C",[441,845,847],{"class":846},"s4JwU","script",[441,849,850],{"class":461}," setup",[441,852,853],{"class":465},">\n",[441,855,856,859,862,865,868,871,874,877,879,881],{"class":443,"line":451},[441,857,858],{"class":454},"const",[441,860,861],{"class":465}," { ",[441,863,864],{"class":660},"data",[441,866,867],{"class":465}," } ",[441,869,870],{"class":454},"=",[441,872,873],{"class":454}," await",[441,875,876],{"class":461}," useFetch",[441,878,557],{"class":465},[441,880,560],{"class":484},[441,882,883],{"class":465},");\n",[441,885,886,889,891],{"class":443,"line":475},[441,887,888],{"class":465},"\u003C/",[441,890,847],{"class":846},[441,892,853],{"class":465},[363,894,895],{},"在 SSR 階段：",[499,897,898,901,904,910],{},[502,899,900],{},"請求進入 Nitro runtime",[502,902,903],{},"Nitro 執行頁面 render",[502,905,906,907],{},"在 server 端呼叫 ",[411,908,909],{},"/api/hello",[502,911,912],{},"組合 HTML 回傳給瀏覽器",[363,914,915,916,370],{},"這整個過程，並不是瀏覽器發生的事情，而是",[367,917,918],{},"完全在 Nitro 所建立的 server 世界中完成",[385,920],{},[358,922,924],{"id":923},"為什麼-nuxt-一定要自己做-nitro","為什麼 Nuxt 一定要自己做 Nitro？",[363,926,927,928],{},"原因其實很單純：\n",[367,929,930],{},"現代 Web 的部署環境變化速度，已經快到不能再綁死在某一個 server 框架上。",[363,932,933],{},"如果 Nuxt 綁定 Express：",[766,935,936,939],{},[502,937,938],{},"Edge 很難支援",[502,940,941],{},"Serverless 會有很多限制",[363,943,944],{},"Nitro 的存在，讓 Nuxt 可以自己掌控 server 抽象層，而不是被底層框架牽著走。",[385,946],{},[358,948,950],{"id":949},"用一個建築比喻重新理解-nitro","用一個建築比喻重新理解 Nitro",[363,952,953],{},"如果把整個系統想成建築流程：",[363,955,956],{},"Nuxt 是設計圖，定義空間、動線與使用體驗。\nNitro 是結構與施工轉換，確保這張設計圖能在不同地區合法落地。\n部署平台則是各地的建築法規與工法。",[363,958,959],{},"你畫的是同一張圖，\nNitro 會幫你轉成最適合當地的施工方式。",[385,961],{},[358,963,965],{"id":964},"結語什麼時候該想到-nitro","結語：什麼時候該想到 Nitro？",[363,967,968],{},"當你在 Nuxt 專案中遇到這些問題時，答案幾乎都在 Nitro 這一層：",[766,970,971,974,977],{},[502,972,973],{},"API 為什麼在 Edge 跑得起來？",[502,975,976],{},"為什麼 SSR 可以部署成 Serverless？",[502,978,979,980,610,982,984],{},"為什麼沒有 ",[411,981,567],{},[411,983,573],{},"？",[363,986,987,988,370],{},"理解 Nitro，不是為了寫更多設定，而是為了",[367,989,990],{},"在架構層級知道事情為什麼能這樣運作",[992,993,994],"style",{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}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 pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}",{"title":413,"searchDepth":451,"depth":451,"links":996},[997,998,999,1000,1001,1002,1003,1004,1005],{"id":360,"depth":451,"text":361},{"id":389,"depth":451,"text":390},{"id":424,"depth":451,"text":425},{"id":529,"depth":451,"text":530},{"id":701,"depth":451,"text":702},{"id":824,"depth":451,"text":825},{"id":923,"depth":451,"text":924},{"id":949,"depth":451,"text":950},{"id":964,"depth":451,"text":965},"深入理解 Nitro 在 Nuxt 中的角色，為什麼它不是 Express，以及它如何讓同一份 Nuxt 專案同時支援 Node、Serverless 與 Edge。","md",null,{"tags":1010,"category":203,"date":1014},[128,789,1011,1012,1013],"ssr","server","edge","2026-02-05",true,{"title":146,"description":1006},"wdnwScDJO2_iwv_Kf9K7Vxz4K63kUXZdQg-kdH0Y6J4",[1019,1021],{"title":142,"path":143,"stem":144,"description":1020,"children":-1},"深入理解 Nuxt 在 build 階段如何將 Vue 與 TypeScript 程式碼轉換為瀏覽器可執行的前端資源，從掃描、編譯、打包到最佳化一次搞懂。",{"title":150,"path":151,"stem":152,"description":1022,"children":-1},"很多人在部署 Nuxt 時卡關，其實問題不在伺服器，而是沒搞清楚 .nuxt 與 .output 的角色差異。本文從用途、產生時機與部署觀點，完整解析這兩個資料夾。",1776690842897]