[{"data":1,"prerenderedAt":863},["ShallowReactive",2],{"navigation":3,"-examples-stream-response":193,"-examples-stream-response-surround":858},[4,91,138,170,177],{"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,133],{"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},"MCP","/utils/mcp","2.utils/6.mcp","material-symbols:swap-calls",{"title":129,"path":130,"stem":131,"icon":132},"More utils","/utils/more","2.utils/9.more","mingcute:plus-line",{"title":134,"path":135,"stem":136,"icon":137},"Community","/utils/community","2.utils/99.community","lets-icons:external",{"title":139,"path":140,"stem":141,"children":142,"icon":144},"Examples","/examples","4.examples/0.index",[143,145,150,154,158,162,166],{"title":139,"path":140,"stem":141,"icon":144},"ph:code",{"title":146,"path":147,"stem":148,"icon":149},"Cookies","/examples/handle-cookie","4.examples/handle-cookie","ph:arrow-right",{"title":151,"path":152,"stem":153,"icon":149},"HTTP QUERY Method","/examples/handle-query","4.examples/handle-query",{"title":155,"path":156,"stem":157,"icon":149},"Sessions","/examples/handle-session","4.examples/handle-session",{"title":159,"path":160,"stem":161,"icon":149},"Static Assets","/examples/serve-static-assets","4.examples/serve-static-assets",{"title":163,"path":164,"stem":165,"icon":149},"Stream Response","/examples/stream-response","4.examples/stream-response",{"title":167,"path":168,"stem":169,"icon":149},"Validate Data","/examples/validate-data","4.examples/validate-data",{"title":171,"path":172,"stem":173,"children":174,"icon":176},"Migration","/migration","5.migration/0.index",[175],{"title":171,"path":172,"stem":173,"icon":176},"icons8:up-round",{"title":178,"path":179,"stem":180,"children":181},"Blog","/blog","99.blog",[182,185,189],{"title":178,"path":179,"stem":183,"icon":184},"99.blog/index","i-lucide-file-text",{"title":186,"path":187,"stem":188,"icon":184},"H3 1.8 - Towards the Edge of the Web","/blog/v1.8","99.blog/1.v1.8",{"title":190,"path":191,"stem":192,"icon":184},"H3 v2 beta","/blog/v2-beta","99.blog/2.v2-beta",{"id":194,"title":163,"body":195,"description":852,"extension":853,"meta":854,"navigation":855,"path":164,"seo":856,"stem":165,"__hash__":857},"content/4.examples/stream-response.md",{"type":196,"value":197,"toc":848,"icon":149},"minimark",[198,202,207,221,257,260,490,494,833,841,844],[199,200,201],"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.",[203,204,206],"h2",{"id":205},"create-a-stream","Create a Stream",[199,208,209,210,220],{},"To stream a response, you first need to create a stream using the ",[211,212,216],"a",{"href":213,"rel":214},"https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream",[215],"nofollow",[217,218,219],"code",{},"ReadableStream"," API:",[222,223,228],"pre",{"className":224,"code":225,"language":226,"meta":227,"style":227},"language-ts shiki shiki-themes github-light github-dark github-dark","const stream = new ReadableStream();\n","ts","",[217,229,230],{"__ignoreMap":227},[231,232,235,239,243,246,249,253],"span",{"class":233,"line":234},"line",1,[231,236,238],{"class":237},"so5gQ","const",[231,240,242],{"class":241},"suiK_"," stream",[231,244,245],{"class":237}," =",[231,247,248],{"class":237}," new",[231,250,252],{"class":251},"shcOC"," ReadableStream",[231,254,256],{"class":255},"slsVL","();\n",[199,258,259],{},"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:",[222,261,263],{"className":224,"code":262,"language":226,"meta":227,"style":227},"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",[217,264,265,288,304,320,338,345,366,399,410,415,427,436,446,456,462,471,479,484],{"__ignoreMap":227},[231,266,267,270,273,276,279,282,285],{"class":233,"line":234},[231,268,269],{"class":237},"let",[231,271,272],{"class":255}," interval",[231,274,275],{"class":237},":",[231,277,278],{"class":251}," NodeJS",[231,280,281],{"class":255},".",[231,283,284],{"class":251},"Timeout",[231,286,287],{"class":255},";\n",[231,289,291,293,295,297,299,301],{"class":233,"line":290},2,[231,292,238],{"class":237},[231,294,242],{"class":241},[231,296,245],{"class":237},[231,298,248],{"class":237},[231,300,252],{"class":251},[231,302,303],{"class":255},"({\n",[231,305,307,310,313,317],{"class":233,"line":306},3,[231,308,309],{"class":251},"  start",[231,311,312],{"class":255},"(",[231,314,316],{"class":315},"sQHwn","controller",[231,318,319],{"class":255},") {\n",[231,321,323,326,329,331,335],{"class":233,"line":322},4,[231,324,325],{"class":255},"    controller.",[231,327,328],{"class":251},"enqueue",[231,330,312],{"class":255},[231,332,334],{"class":333},"sfrk1","\"\u003Cul>\"",[231,336,337],{"class":255},");\n",[231,339,341],{"class":233,"line":340},5,[231,342,344],{"emptyLinePlaceholder":343},true,"\n",[231,346,348,351,354,357,360,363],{"class":233,"line":347},6,[231,349,350],{"class":255},"    interval ",[231,352,353],{"class":237},"=",[231,355,356],{"class":251}," setInterval",[231,358,359],{"class":255},"(() ",[231,361,362],{"class":237},"=>",[231,364,365],{"class":255}," {\n",[231,367,369,372,374,376,379,382,385,388,391,394,397],{"class":233,"line":368},7,[231,370,371],{"class":255},"      controller.",[231,373,328],{"class":251},[231,375,312],{"class":255},[231,377,378],{"class":333},"\"\u003Cli>\"",[231,380,381],{"class":237}," +",[231,383,384],{"class":255}," Math.",[231,386,387],{"class":251},"random",[231,389,390],{"class":255},"() ",[231,392,393],{"class":237},"+",[231,395,396],{"class":333}," \"\u003C/li>\"",[231,398,337],{"class":255},[231,400,402,405,408],{"class":233,"line":401},8,[231,403,404],{"class":255},"    }, ",[231,406,407],{"class":241},"100",[231,409,337],{"class":255},[231,411,413],{"class":233,"line":412},9,[231,414,344],{"emptyLinePlaceholder":343},[231,416,418,421,423,425],{"class":233,"line":417},10,[231,419,420],{"class":251},"    setTimeout",[231,422,359],{"class":255},[231,424,362],{"class":237},[231,426,365],{"class":255},[231,428,430,433],{"class":233,"line":429},11,[231,431,432],{"class":251},"      clearInterval",[231,434,435],{"class":255},"(interval);\n",[231,437,439,441,444],{"class":233,"line":438},12,[231,440,371],{"class":255},[231,442,443],{"class":251},"close",[231,445,256],{"class":255},[231,447,449,451,454],{"class":233,"line":448},13,[231,450,404],{"class":255},[231,452,453],{"class":241},"1000",[231,455,337],{"class":255},[231,457,459],{"class":233,"line":458},14,[231,460,461],{"class":255},"  },\n",[231,463,465,468],{"class":233,"line":464},15,[231,466,467],{"class":251},"  cancel",[231,469,470],{"class":255},"() {\n",[231,472,474,477],{"class":233,"line":473},16,[231,475,476],{"class":251},"    clearInterval",[231,478,435],{"class":255},[231,480,482],{"class":233,"line":481},17,[231,483,461],{"class":255},[231,485,487],{"class":233,"line":486},18,[231,488,489],{"class":255},"});\n",[203,491,493],{"id":492},"send-a-stream","Send a Stream",[222,495,497],{"className":224,"code":496,"language":226,"meta":227,"style":227},"import { H3 } 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  event.res.headers.set(\"Content-Type\", \"text/html\");\n  event.res.headers.set(\"Cache-Control\", \"no-cache\");\n  event.res.headers.set(\"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",[217,498,499,515,519,539,543,564,570,591,609,627,631,648,663,674,686,690,705,730,739,744,756,764,773,782,788,796,803,808,814,819,828],{"__ignoreMap":227},[231,500,501,504,507,510,513],{"class":233,"line":234},[231,502,503],{"class":237},"import",[231,505,506],{"class":255}," { H3 } ",[231,508,509],{"class":237},"from",[231,511,512],{"class":333}," \"h3\"",[231,514,287],{"class":255},[231,516,517],{"class":233,"line":290},[231,518,344],{"emptyLinePlaceholder":343},[231,520,521,524,527,530,532,534,537],{"class":233,"line":306},[231,522,523],{"class":237},"export",[231,525,526],{"class":237}," const",[231,528,529],{"class":241}," app",[231,531,245],{"class":237},[231,533,248],{"class":237},[231,535,536],{"class":251}," H3",[231,538,256],{"class":255},[231,540,541],{"class":233,"line":322},[231,542,344],{"emptyLinePlaceholder":343},[231,544,545,548,551,554,557,560,562],{"class":233,"line":340},[231,546,547],{"class":255},"app.",[231,549,550],{"class":251},"use",[231,552,553],{"class":255},"((",[231,555,556],{"class":315},"event",[231,558,559],{"class":255},") ",[231,561,362],{"class":237},[231,563,365],{"class":255},[231,565,566],{"class":233,"line":347},[231,567,569],{"class":568},"sCsY4","  // Set to response header to tell to the client that we are sending a stream.\n",[231,571,572,575,578,580,583,586,589],{"class":233,"line":368},[231,573,574],{"class":255},"  event.res.headers.",[231,576,577],{"class":251},"set",[231,579,312],{"class":255},[231,581,582],{"class":333},"\"Content-Type\"",[231,584,585],{"class":255},", ",[231,587,588],{"class":333},"\"text/html\"",[231,590,337],{"class":255},[231,592,593,595,597,599,602,604,607],{"class":233,"line":401},[231,594,574],{"class":255},[231,596,577],{"class":251},[231,598,312],{"class":255},[231,600,601],{"class":333},"\"Cache-Control\"",[231,603,585],{"class":255},[231,605,606],{"class":333},"\"no-cache\"",[231,608,337],{"class":255},[231,610,611,613,615,617,620,622,625],{"class":233,"line":412},[231,612,574],{"class":255},[231,614,577],{"class":251},[231,616,312],{"class":255},[231,618,619],{"class":333},"\"Transfer-Encoding\"",[231,621,585],{"class":255},[231,623,624],{"class":333},"\"chunked\"",[231,626,337],{"class":255},[231,628,629],{"class":233,"line":417},[231,630,344],{"emptyLinePlaceholder":343},[231,632,633,636,638,640,642,644,646],{"class":233,"line":429},[231,634,635],{"class":237},"  let",[231,637,272],{"class":255},[231,639,275],{"class":237},[231,641,278],{"class":251},[231,643,281],{"class":255},[231,645,284],{"class":251},[231,647,287],{"class":255},[231,649,650,653,655,657,659,661],{"class":233,"line":438},[231,651,652],{"class":237},"  const",[231,654,242],{"class":241},[231,656,245],{"class":237},[231,658,248],{"class":237},[231,660,252],{"class":251},[231,662,303],{"class":255},[231,664,665,668,670,672],{"class":233,"line":448},[231,666,667],{"class":251},"    start",[231,669,312],{"class":255},[231,671,316],{"class":315},[231,673,319],{"class":255},[231,675,676,678,680,682,684],{"class":233,"line":458},[231,677,371],{"class":255},[231,679,328],{"class":251},[231,681,312],{"class":255},[231,683,334],{"class":333},[231,685,337],{"class":255},[231,687,688],{"class":233,"line":464},[231,689,344],{"emptyLinePlaceholder":343},[231,691,692,695,697,699,701,703],{"class":233,"line":473},[231,693,694],{"class":255},"      interval ",[231,696,353],{"class":237},[231,698,356],{"class":251},[231,700,359],{"class":255},[231,702,362],{"class":237},[231,704,365],{"class":255},[231,706,707,710,712,714,716,718,720,722,724,726,728],{"class":233,"line":481},[231,708,709],{"class":255},"        controller.",[231,711,328],{"class":251},[231,713,312],{"class":255},[231,715,378],{"class":333},[231,717,381],{"class":237},[231,719,384],{"class":255},[231,721,387],{"class":251},[231,723,390],{"class":255},[231,725,393],{"class":237},[231,727,396],{"class":333},[231,729,337],{"class":255},[231,731,732,735,737],{"class":233,"line":486},[231,733,734],{"class":255},"      }, ",[231,736,407],{"class":241},[231,738,337],{"class":255},[231,740,742],{"class":233,"line":741},19,[231,743,344],{"emptyLinePlaceholder":343},[231,745,747,750,752,754],{"class":233,"line":746},20,[231,748,749],{"class":251},"      setTimeout",[231,751,359],{"class":255},[231,753,362],{"class":237},[231,755,365],{"class":255},[231,757,759,762],{"class":233,"line":758},21,[231,760,761],{"class":251},"        clearInterval",[231,763,435],{"class":255},[231,765,767,769,771],{"class":233,"line":766},22,[231,768,709],{"class":255},[231,770,443],{"class":251},[231,772,256],{"class":255},[231,774,776,778,780],{"class":233,"line":775},23,[231,777,734],{"class":255},[231,779,453],{"class":241},[231,781,337],{"class":255},[231,783,785],{"class":233,"line":784},24,[231,786,787],{"class":255},"    },\n",[231,789,791,794],{"class":233,"line":790},25,[231,792,793],{"class":251},"    cancel",[231,795,470],{"class":255},[231,797,799,801],{"class":233,"line":798},26,[231,800,432],{"class":251},[231,802,435],{"class":255},[231,804,806],{"class":233,"line":805},27,[231,807,787],{"class":255},[231,809,811],{"class":233,"line":810},28,[231,812,813],{"class":255},"  });\n",[231,815,817],{"class":233,"line":816},29,[231,818,344],{"emptyLinePlaceholder":343},[231,820,822,825],{"class":233,"line":821},30,[231,823,824],{"class":237},"  return",[231,826,827],{"class":255}," stream;\n",[231,829,831],{"class":233,"line":830},31,[231,832,489],{"class":255},[199,834,835,836,840],{},"Open your browser to ",[211,837,838],{"href":838,"rel":839},"http://localhost:3000",[215]," and you should see a list of random numbers appearing every 100 milliseconds.",[199,842,843],{},"Magic! 🎉",[845,846,847],"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":227,"searchDepth":290,"depth":290,"links":849},[850,851],{"id":205,"depth":290,"text":206},{"id":492,"depth":290,"text":493},"Stream response to the client.","md",{"icon":149},{"icon":149},{"title":163,"description":852},"5-os9lTyn9mjf9I_8pX2HWtdMzj8ZVq4Uhb3NFPIqUo",[859,861],{"title":159,"path":160,"stem":161,"description":860,"icon":149,"children":-1},"Serve static assets such as HTML, images, CSS, JavaScript, etc.",{"title":167,"path":168,"stem":169,"description":862,"icon":149,"children":-1},"Ensure that your data are valid and safe before processing them.",1783690727991]