[{"data":1,"prerenderedAt":848},["ShallowReactive",2],{"navigation":3,"-examples-stream-response":184,"-examples-stream-response-surround":843},[4,91,133,161,168],{"title":5,"path":6,"stem":7,"children":8,"icon":90},"Guide","/guide","1.guide/0.index",[9,12,53,69],{"title":10,"path":6,"stem":7,"icon":11},"Getting Started","pixel:play",{"title":5,"icon":13,"path":14,"stem":15,"children":16,"page":52},"ph:book-open-duotone","/guide/basics","1.guide/1.basics",[17,22,27,32,37,42,47],{"title":18,"path":19,"stem":20,"icon":21},"Request Lifecycle","/guide/basics/lifecycle","1.guide/1.basics/1.lifecycle","icon-park-outline:handle-round",{"title":23,"path":24,"stem":25,"icon":26},"Routing","/guide/basics/routing","1.guide/1.basics/2.routing","solar:routing-bold",{"title":28,"path":29,"stem":30,"icon":31},"Middleware","/guide/basics/middleware","1.guide/1.basics/3.middleware","mdi:middleware-outline",{"title":33,"path":34,"stem":35,"icon":36},"Event Handlers","/guide/basics/handler","1.guide/1.basics/4.handler","mdi:function",{"title":38,"path":39,"stem":40,"icon":41},"Sending Response","/guide/basics/response","1.guide/1.basics/5.response","tabler:json",{"title":43,"path":44,"stem":45,"icon":46},"Error Handling","/guide/basics/error","1.guide/1.basics/6.error","tabler:error-404",{"title":48,"path":49,"stem":50,"icon":51},"Nested Apps","/guide/basics/nested-apps","1.guide/1.basics/7.nested-apps","material-symbols-light:layers-outline",false,{"title":54,"icon":55,"path":56,"stem":57,"children":58,"page":52},"API","material-symbols-light:api-rounded","/guide/api","1.guide/900.api",[59,64],{"title":60,"path":61,"stem":62,"icon":63},"H3","/guide/api/h3","1.guide/900.api/1.h3","material-symbols:bolt-rounded",{"title":65,"path":66,"stem":67,"icon":68},"H3Event","/guide/api/h3event","1.guide/900.api/2.h3event","material-symbols:data-object-rounded",{"title":70,"icon":71,"path":72,"stem":73,"children":74,"page":52},"Advanced","hugeicons:more-01","/guide/advanced","1.guide/901.advanced",[75,80,85],{"title":76,"path":77,"stem":78,"icon":79},"Plugins","/guide/advanced/plugins","1.guide/901.advanced/1.plugins","clarity:plugin-line",{"title":81,"path":82,"stem":83,"icon":84},"WebSockets","/guide/advanced/websocket","1.guide/901.advanced/2.websocket","hugeicons:live-streaming-02",{"title":86,"path":87,"stem":88,"icon":89},"Nightly Builds","/guide/advanced/nightly","1.guide/901.advanced/9.nightly","game-icons:barn-owl","i-ph:book-open-duotone",{"title":92,"path":93,"stem":94,"children":95,"icon":97},"Utils","/utils","2.utils/0.index",[96,98,103,108,113,118,123,128],{"title":92,"path":93,"stem":94,"icon":97},"ph:function-bold",{"title":99,"path":100,"stem":101,"icon":102},"Request","/utils/request","2.utils/1.request","material-symbols-light:input",{"title":104,"path":105,"stem":106,"icon":107},"Response","/utils/response","2.utils/2.response","material-symbols-light:output",{"title":109,"path":110,"stem":111,"icon":112},"Cookie","/utils/cookie","2.utils/3.cookie","material-symbols:cookie-outline",{"title":114,"path":115,"stem":116,"icon":117},"Security","/utils/security","2.utils/4.security","wpf:key-security",{"title":119,"path":120,"stem":121,"icon":122},"Proxy","/utils/proxy","2.utils/5.proxy","arcticons:super-proxy",{"title":124,"path":125,"stem":126,"icon":127},"More utils","/utils/more","2.utils/9.more","mingcute:plus-line",{"title":129,"path":130,"stem":131,"icon":132},"Community","/utils/community","2.utils/99.community","lets-icons:external",{"title":134,"path":135,"stem":136,"children":137,"icon":139},"Examples","/examples","4.examples/0.index",[138,140,145,149,153,157],{"title":134,"path":135,"stem":136,"icon":139},"ph:code",{"title":141,"path":142,"stem":143,"icon":144},"Cookies","/examples/handle-cookie","4.examples/handle-cookie","ph:arrow-right",{"title":146,"path":147,"stem":148,"icon":144},"Sessions","/examples/handle-session","4.examples/handle-session",{"title":150,"path":151,"stem":152,"icon":144},"Static Assets","/examples/serve-static-assets","4.examples/serve-static-assets",{"title":154,"path":155,"stem":156,"icon":144},"Stream Response","/examples/stream-response","4.examples/stream-response",{"title":158,"path":159,"stem":160,"icon":144},"Validate Data","/examples/validate-data","4.examples/validate-data",{"title":162,"path":163,"stem":164,"children":165,"icon":167},"Migration","/migration","5.migration/0.index",[166],{"title":162,"path":163,"stem":164,"icon":167},"icons8:up-round",{"title":169,"path":170,"stem":171,"children":172},"Blog","/blog","99.blog",[173,176,180],{"title":169,"path":170,"stem":174,"icon":175},"99.blog/index","i-lucide-file-text",{"title":177,"path":178,"stem":179,"icon":175},"H3 1.8 - Towards the Edge of the Web","/blog/v1.8","99.blog/1.v1.8",{"title":181,"path":182,"stem":183,"icon":175},"H3 v2 beta","/blog/v2-beta","99.blog/2.v2-beta",{"id":185,"title":154,"body":186,"description":837,"extension":838,"meta":839,"navigation":840,"path":155,"seo":841,"stem":156,"__hash__":842},"content/4.examples/stream-response.md",{"type":187,"value":188,"toc":833,"icon":144},"minimark",[189,193,198,212,248,251,481,485,818,826,829],[190,191,192],"p",{},"Using stream responses It allows you to send data to the client as soon as you have it. This is useful for large files or long running responses.",[194,195,197],"h2",{"id":196},"create-a-stream","Create a Stream",[190,199,200,201,211],{},"To stream a response, you first need to create a stream using the ",[202,203,207],"a",{"href":204,"rel":205},"https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream",[206],"nofollow",[208,209,210],"code",{},"ReadableStream"," API:",[213,214,219],"pre",{"className":215,"code":216,"language":217,"meta":218,"style":218},"language-ts shiki shiki-themes github-light github-dark github-dark","const stream = new ReadableStream();\n","ts","",[208,220,221],{"__ignoreMap":218},[222,223,226,230,234,237,240,244],"span",{"class":224,"line":225},"line",1,[222,227,229],{"class":228},"so5gQ","const",[222,231,233],{"class":232},"suiK_"," stream",[222,235,236],{"class":228}," =",[222,238,239],{"class":228}," new",[222,241,243],{"class":242},"shcOC"," ReadableStream",[222,245,247],{"class":246},"slsVL","();\n",[190,249,250],{},"For the example, we will create a start function that will send a random number every 100 milliseconds. After 1000 milliseconds, it will close the stream:",[213,252,254],{"className":215,"code":253,"language":217,"meta":218,"style":218},"let interval: NodeJS.Timeout;\nconst stream = new ReadableStream({\n  start(controller) {\n    controller.enqueue(\"\u003Cul>\");\n\n    interval = setInterval(() => {\n      controller.enqueue(\"\u003Cli>\" + Math.random() + \"\u003C/li>\");\n    }, 100);\n\n    setTimeout(() => {\n      clearInterval(interval);\n      controller.close();\n    }, 1000);\n  },\n  cancel() {\n    clearInterval(interval);\n  },\n});\n",[208,255,256,279,295,311,329,336,357,390,401,406,418,427,437,447,453,462,470,475],{"__ignoreMap":218},[222,257,258,261,264,267,270,273,276],{"class":224,"line":225},[222,259,260],{"class":228},"let",[222,262,263],{"class":246}," interval",[222,265,266],{"class":228},":",[222,268,269],{"class":242}," NodeJS",[222,271,272],{"class":246},".",[222,274,275],{"class":242},"Timeout",[222,277,278],{"class":246},";\n",[222,280,282,284,286,288,290,292],{"class":224,"line":281},2,[222,283,229],{"class":228},[222,285,233],{"class":232},[222,287,236],{"class":228},[222,289,239],{"class":228},[222,291,243],{"class":242},[222,293,294],{"class":246},"({\n",[222,296,298,301,304,308],{"class":224,"line":297},3,[222,299,300],{"class":242},"  start",[222,302,303],{"class":246},"(",[222,305,307],{"class":306},"sQHwn","controller",[222,309,310],{"class":246},") {\n",[222,312,314,317,320,322,326],{"class":224,"line":313},4,[222,315,316],{"class":246},"    controller.",[222,318,319],{"class":242},"enqueue",[222,321,303],{"class":246},[222,323,325],{"class":324},"sfrk1","\"\u003Cul>\"",[222,327,328],{"class":246},");\n",[222,330,332],{"class":224,"line":331},5,[222,333,335],{"emptyLinePlaceholder":334},true,"\n",[222,337,339,342,345,348,351,354],{"class":224,"line":338},6,[222,340,341],{"class":246},"    interval ",[222,343,344],{"class":228},"=",[222,346,347],{"class":242}," setInterval",[222,349,350],{"class":246},"(() ",[222,352,353],{"class":228},"=>",[222,355,356],{"class":246}," {\n",[222,358,360,363,365,367,370,373,376,379,382,385,388],{"class":224,"line":359},7,[222,361,362],{"class":246},"      controller.",[222,364,319],{"class":242},[222,366,303],{"class":246},[222,368,369],{"class":324},"\"\u003Cli>\"",[222,371,372],{"class":228}," +",[222,374,375],{"class":246}," Math.",[222,377,378],{"class":242},"random",[222,380,381],{"class":246},"() ",[222,383,384],{"class":228},"+",[222,386,387],{"class":324}," \"\u003C/li>\"",[222,389,328],{"class":246},[222,391,393,396,399],{"class":224,"line":392},8,[222,394,395],{"class":246},"    }, ",[222,397,398],{"class":232},"100",[222,400,328],{"class":246},[222,402,404],{"class":224,"line":403},9,[222,405,335],{"emptyLinePlaceholder":334},[222,407,409,412,414,416],{"class":224,"line":408},10,[222,410,411],{"class":242},"    setTimeout",[222,413,350],{"class":246},[222,415,353],{"class":228},[222,417,356],{"class":246},[222,419,421,424],{"class":224,"line":420},11,[222,422,423],{"class":242},"      clearInterval",[222,425,426],{"class":246},"(interval);\n",[222,428,430,432,435],{"class":224,"line":429},12,[222,431,362],{"class":246},[222,433,434],{"class":242},"close",[222,436,247],{"class":246},[222,438,440,442,445],{"class":224,"line":439},13,[222,441,395],{"class":246},[222,443,444],{"class":232},"1000",[222,446,328],{"class":246},[222,448,450],{"class":224,"line":449},14,[222,451,452],{"class":246},"  },\n",[222,454,456,459],{"class":224,"line":455},15,[222,457,458],{"class":242},"  cancel",[222,460,461],{"class":246},"() {\n",[222,463,465,468],{"class":224,"line":464},16,[222,466,467],{"class":242},"    clearInterval",[222,469,426],{"class":246},[222,471,473],{"class":224,"line":472},17,[222,474,452],{"class":246},[222,476,478],{"class":224,"line":477},18,[222,479,480],{"class":246},"});\n",[194,482,484],{"id":483},"send-a-stream","Send a Stream",[213,486,488],{"className":215,"code":487,"language":217,"meta":218,"style":218},"import { H3, setResponseHeader } from \"h3\";\n\nexport const app = new H3();\n\napp.use((event) => {\n  // Set to response header to tell to the client that we are sending a stream.\n  setResponseHeader(event, \"Content-Type\", \"text/html\");\n  setResponseHeader(event, \"Cache-Control\", \"no-cache\");\n  setResponseHeader(event, \"Transfer-Encoding\", \"chunked\");\n\n  let interval: NodeJS.Timeout;\n  const stream = new ReadableStream({\n    start(controller) {\n      controller.enqueue(\"\u003Cul>\");\n\n      interval = setInterval(() => {\n        controller.enqueue(\"\u003Cli>\" + Math.random() + \"\u003C/li>\");\n      }, 100);\n\n      setTimeout(() => {\n        clearInterval(interval);\n        controller.close();\n      }, 1000);\n    },\n    cancel() {\n      clearInterval(interval);\n    },\n  });\n\n  return stream;\n});\n",[208,489,490,506,510,530,534,555,561,580,596,612,616,633,648,659,671,675,690,715,724,729,741,749,758,767,773,781,788,793,799,804,813],{"__ignoreMap":218},[222,491,492,495,498,501,504],{"class":224,"line":225},[222,493,494],{"class":228},"import",[222,496,497],{"class":246}," { H3, setResponseHeader } ",[222,499,500],{"class":228},"from",[222,502,503],{"class":324}," \"h3\"",[222,505,278],{"class":246},[222,507,508],{"class":224,"line":281},[222,509,335],{"emptyLinePlaceholder":334},[222,511,512,515,518,521,523,525,528],{"class":224,"line":297},[222,513,514],{"class":228},"export",[222,516,517],{"class":228}," const",[222,519,520],{"class":232}," app",[222,522,236],{"class":228},[222,524,239],{"class":228},[222,526,527],{"class":242}," H3",[222,529,247],{"class":246},[222,531,532],{"class":224,"line":313},[222,533,335],{"emptyLinePlaceholder":334},[222,535,536,539,542,545,548,551,553],{"class":224,"line":331},[222,537,538],{"class":246},"app.",[222,540,541],{"class":242},"use",[222,543,544],{"class":246},"((",[222,546,547],{"class":306},"event",[222,549,550],{"class":246},") ",[222,552,353],{"class":228},[222,554,356],{"class":246},[222,556,557],{"class":224,"line":338},[222,558,560],{"class":559},"sCsY4","  // Set to response header to tell to the client that we are sending a stream.\n",[222,562,563,566,569,572,575,578],{"class":224,"line":359},[222,564,565],{"class":242},"  setResponseHeader",[222,567,568],{"class":246},"(event, ",[222,570,571],{"class":324},"\"Content-Type\"",[222,573,574],{"class":246},", ",[222,576,577],{"class":324},"\"text/html\"",[222,579,328],{"class":246},[222,581,582,584,586,589,591,594],{"class":224,"line":392},[222,583,565],{"class":242},[222,585,568],{"class":246},[222,587,588],{"class":324},"\"Cache-Control\"",[222,590,574],{"class":246},[222,592,593],{"class":324},"\"no-cache\"",[222,595,328],{"class":246},[222,597,598,600,602,605,607,610],{"class":224,"line":403},[222,599,565],{"class":242},[222,601,568],{"class":246},[222,603,604],{"class":324},"\"Transfer-Encoding\"",[222,606,574],{"class":246},[222,608,609],{"class":324},"\"chunked\"",[222,611,328],{"class":246},[222,613,614],{"class":224,"line":408},[222,615,335],{"emptyLinePlaceholder":334},[222,617,618,621,623,625,627,629,631],{"class":224,"line":420},[222,619,620],{"class":228},"  let",[222,622,263],{"class":246},[222,624,266],{"class":228},[222,626,269],{"class":242},[222,628,272],{"class":246},[222,630,275],{"class":242},[222,632,278],{"class":246},[222,634,635,638,640,642,644,646],{"class":224,"line":429},[222,636,637],{"class":228},"  const",[222,639,233],{"class":232},[222,641,236],{"class":228},[222,643,239],{"class":228},[222,645,243],{"class":242},[222,647,294],{"class":246},[222,649,650,653,655,657],{"class":224,"line":439},[222,651,652],{"class":242},"    start",[222,654,303],{"class":246},[222,656,307],{"class":306},[222,658,310],{"class":246},[222,660,661,663,665,667,669],{"class":224,"line":449},[222,662,362],{"class":246},[222,664,319],{"class":242},[222,666,303],{"class":246},[222,668,325],{"class":324},[222,670,328],{"class":246},[222,672,673],{"class":224,"line":455},[222,674,335],{"emptyLinePlaceholder":334},[222,676,677,680,682,684,686,688],{"class":224,"line":464},[222,678,679],{"class":246},"      interval ",[222,681,344],{"class":228},[222,683,347],{"class":242},[222,685,350],{"class":246},[222,687,353],{"class":228},[222,689,356],{"class":246},[222,691,692,695,697,699,701,703,705,707,709,711,713],{"class":224,"line":472},[222,693,694],{"class":246},"        controller.",[222,696,319],{"class":242},[222,698,303],{"class":246},[222,700,369],{"class":324},[222,702,372],{"class":228},[222,704,375],{"class":246},[222,706,378],{"class":242},[222,708,381],{"class":246},[222,710,384],{"class":228},[222,712,387],{"class":324},[222,714,328],{"class":246},[222,716,717,720,722],{"class":224,"line":477},[222,718,719],{"class":246},"      }, ",[222,721,398],{"class":232},[222,723,328],{"class":246},[222,725,727],{"class":224,"line":726},19,[222,728,335],{"emptyLinePlaceholder":334},[222,730,732,735,737,739],{"class":224,"line":731},20,[222,733,734],{"class":242},"      setTimeout",[222,736,350],{"class":246},[222,738,353],{"class":228},[222,740,356],{"class":246},[222,742,744,747],{"class":224,"line":743},21,[222,745,746],{"class":242},"        clearInterval",[222,748,426],{"class":246},[222,750,752,754,756],{"class":224,"line":751},22,[222,753,694],{"class":246},[222,755,434],{"class":242},[222,757,247],{"class":246},[222,759,761,763,765],{"class":224,"line":760},23,[222,762,719],{"class":246},[222,764,444],{"class":232},[222,766,328],{"class":246},[222,768,770],{"class":224,"line":769},24,[222,771,772],{"class":246},"    },\n",[222,774,776,779],{"class":224,"line":775},25,[222,777,778],{"class":242},"    cancel",[222,780,461],{"class":246},[222,782,784,786],{"class":224,"line":783},26,[222,785,423],{"class":242},[222,787,426],{"class":246},[222,789,791],{"class":224,"line":790},27,[222,792,772],{"class":246},[222,794,796],{"class":224,"line":795},28,[222,797,798],{"class":246},"  });\n",[222,800,802],{"class":224,"line":801},29,[222,803,335],{"emptyLinePlaceholder":334},[222,805,807,810],{"class":224,"line":806},30,[222,808,809],{"class":228},"  return",[222,811,812],{"class":246}," stream;\n",[222,814,816],{"class":224,"line":815},31,[222,817,480],{"class":246},[190,819,820,821,825],{},"Open your browser to ",[202,822,823],{"href":823,"rel":824},"http://localhost:3000",[206]," and you should see a list of random numbers appearing every 100 milliseconds.",[190,827,828],{},"Magic! 🎉",[830,831,832],"style",{},"html pre.shiki code .so5gQ, html code.shiki .so5gQ{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#F97583}html pre.shiki code .suiK_, html code.shiki .suiK_{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#79B8FF}html pre.shiki code .shcOC, html code.shiki .shcOC{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#B392F0}html pre.shiki code .slsVL, html code.shiki .slsVL{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8}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);}html pre.shiki code .sQHwn, html code.shiki .sQHwn{--shiki-light:#E36209;--shiki-default:#FFAB70;--shiki-dark:#FFAB70}html pre.shiki code .sfrk1, html code.shiki .sfrk1{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF}html pre.shiki code .sCsY4, html code.shiki .sCsY4{--shiki-light:#6A737D;--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":218,"searchDepth":281,"depth":281,"links":834},[835,836],{"id":196,"depth":281,"text":197},{"id":483,"depth":281,"text":484},"Stream response to the client.","md",{"icon":144},{"icon":144},{"title":154,"description":837},"4QxO_p2rC-Cd2BLOnj_NWZ3Gy5Uyt5lAu6quj95Aebk",[844,846],{"title":150,"path":151,"stem":152,"description":845,"icon":144,"children":-1},"Serve static assets such as HTML, images, CSS, JavaScript, etc.",{"title":158,"path":159,"stem":160,"description":847,"icon":144,"children":-1},"Ensure that your data are valid and safe before processing them.",1768646387394]