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