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