0:[[["",{"children":["streaming",{"children":["",{}]}]},null,null,true],"$L1",["$L2",null]]]
2:[[["$","meta",null,{"charSet":"utf-8"}],["$","title",null,{"children":"Streaming | Next.js App Router"}],["$","meta",null,{"name":"description","content":"A playground to explore new Next.js App Router features such as nested layouts, instant loading states, streaming, and component level data fetching."}],null,null,null,null,null,null,null,null,["$","meta",null,{"name":"viewport","content":"width=device-width, initial-scale=1"}],null,null,null,null,null,null,null,null,null,null,[]],[null,null,null,null],null,null,[null,null,null,null,null],null,null,null,null,[null,[["$","link",null,{"rel":"icon","href":"/_next/static/media/metadata/favicon.7161ee1d.ico","type":"image/x-icon","sizes":"any"}]],[],null]]
3:I{"id":"7581","name":"GlobalNav","chunks":["2575:2575-db88cfed28c36444","3185:app/layout-aa3a5899f5f2a9fe"],"async":false}
4:I{"id":"7088","name":"AddressBar","chunks":["2575:2575-db88cfed28c36444","3185:app/layout-aa3a5899f5f2a9fe"],"async":false}
5:I{"id":"8041","name":"","chunks":["2272:webpack-f863700beac54e80","9701:9701-a5c4ac6177b0a61e"],"async":false}
6:I{"id":"26","name":"","chunks":["2272:webpack-f863700beac54e80","9701:9701-a5c4ac6177b0a61e"],"async":false}
1:[["$","html",null,{"lang":"en","className":"[color-scheme:dark]","children":[["$","head",null,{}],["$","body",null,{"className":"overflow-y-scroll bg-gray-1100 bg-[url('/grid.svg')]","children":[["$","$L3",null,{}],["$","div",null,{"className":"lg:pl-72","children":["$","div",null,{"className":"mx-auto max-w-4xl space-y-8 px-2 pt-20 lg:py-8 lg:px-8","children":[["$","div",null,{"className":"rounded-lg bg-vc-border-gradient p-px shadow-lg shadow-black/20","children":["$","div",null,{"className":"rounded-lg bg-black","children":["$","$L4",null,{}]}]}],["$","div",null,{"className":"rounded-lg bg-vc-border-gradient p-px shadow-lg shadow-black/20","children":["$","div",null,{"className":"rounded-lg bg-black p-3.5 lg:p-6","children":["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children"],"hasLoading":false,"template":["$","$L6",null,{}],"notFound":["$","div",null,{"className":"relative rounded-lg border border-dashed p-4 lg:p-9 border-vercel-pink animate-[rerender_1s_ease-in-out_1] text-vercel-pink","children":[["$","div",null,{"className":"absolute -top-2.5 flex gap-x-1 text-[9px] uppercase leading-4 tracking-widest left-4 lg:left-9","children":[["$","div",null,{"className":"rounded-full px-1.5 shadow-[0_0_1px_3px_black] bg-vercel-pink text-white animate-[highlight_1s_ease-in-out_1]","children":"not-found.tsx"}]]}],["$","div",null,{"className":"space-y-4 text-vercel-pink","children":[["$","h2",null,{"className":"text-lg font-bold","children":"Not Found"}],["$","p",null,{"className":"text-sm","children":"Could not find requested resource"}]]}]]}],"notFoundStyles":[],"childProp":{"current":["$L7",null,null,[]],"segment":"streaming"}}]}]}],["$","div",null,{"className":"rounded-lg bg-vc-border-gradient p-px shadow-lg shadow-black/20","children":["$","div",null,{"className":"rounded-lg bg-black","children":["$","div",null,{"className":"flex items-center justify-between gap-x-4 p-3.5 lg:px-5 lg:py-3","children":[["$","div",null,{"className":"flex items-center gap-x-1.5","children":[["$","div",null,{"className":"text-sm text-gray-400","children":"By"}],["$","a",null,{"href":"https://vercel.com","title":"Vercel","children":["$","div",null,{"className":"w-16 text-gray-100 hover:text-gray-50","children":["$","svg",null,{"viewBox":"0 0 4438 1000","fill":"currentColor","xmlns":"http://www.w3.org/2000/svg","children":["$","path",null,{"d":"M2223.75 250C2051.25 250 1926.87 362.5 1926.87 531.25C1926.87 700 2066.72 812.5 2239.38 812.5C2343.59 812.5 2435.47 771.25 2492.34 701.719L2372.81 632.656C2341.25 667.188 2293.28 687.344 2239.38 687.344C2164.53 687.344 2100.94 648.281 2077.34 585.781H2515.16C2518.59 568.281 2520.63 550.156 2520.63 531.094C2520.63 362.5 2396.41 250 2223.75 250ZM2076.09 476.562C2095.62 414.219 2149.06 375 2223.75 375C2298.59 375 2352.03 414.219 2371.41 476.562H2076.09ZM2040.78 78.125L1607.81 828.125L1174.69 78.125H1337.03L1607.66 546.875L1878.28 78.125H2040.78ZM577.344 0L1154.69 1000H0L577.344 0ZM3148.75 531.25C3148.75 625 3210 687.5 3305 687.5C3369.38 687.5 3417.66 658.281 3442.5 610.625L3562.5 679.844C3512.81 762.656 3419.69 812.5 3305 812.5C3132.34 812.5 3008.13 700 3008.13 531.25C3008.13 362.5 3132.5 250 3305 250C3419.69 250 3512.66 299.844 3562.5 382.656L3442.5 451.875C3417.66 404.219 3369.38 375 3305 375C3210.16 375 3148.75 437.5 3148.75 531.25ZM4437.5 78.125V796.875H4296.88V78.125H4437.5ZM3906.25 250C3733.75 250 3609.38 362.5 3609.38 531.25C3609.38 700 3749.38 812.5 3921.88 812.5C4026.09 812.5 4117.97 771.25 4174.84 701.719L4055.31 632.656C4023.75 667.188 3975.78 687.344 3921.88 687.344C3847.03 687.344 3783.44 648.281 3759.84 585.781H4197.66C4201.09 568.281 4203.12 550.156 4203.12 531.094C4203.12 362.5 4078.91 250 3906.25 250ZM3758.59 476.562C3778.13 414.219 3831.41 375 3906.25 375C3981.09 375 4034.53 414.219 4053.91 476.562H3758.59ZM2961.25 265.625V417.031C2945.63 412.5 2929.06 409.375 2911.25 409.375C2820.47 409.375 2755 471.875 2755 565.625V796.875H2614.38V265.625H2755V409.375C2755 330 2847.34 265.625 2961.25 265.625Z"}]}]}]}]]}],["$","div",null,{"className":"text-sm text-gray-400","children":[["$","a",null,{"className":"underline decoration-dotted underline-offset-4 hover:text-gray-400","href":"https://github.com/vercel/app-playground","target":"_blank","rel":"noreferrer","children":"View code"}]," or ",["$","a",null,{"className":"underline decoration-dotted underline-offset-4 hover:text-gray-400","href":"https://vercel.com/templates/next.js/app-directory","target":"_blank","rel":"noreferrer","children":"deploy your own"}]]}]]}]}]}]]}]}]]}]]}],null,null,[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/e4f82a68ac8c2ed1.css","precedence":"next.js"}]]]
8:I{"id":"5803","name":"Tab","chunks":["2575:2575-db88cfed28c36444","5699:app/styling/layout-e26dcd28fbfe3afe"],"async":false}
7:["$","div",null,{"className":"space-y-9","children":[["$","div",null,{"className":"flex justify-between","children":["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","$L8","/streamingundefined",{"item":{"text":"Home"},"path":"/streaming"}],["$","$L8","/streamingedge/product/1",{"item":{"text":"Edge Runtime","slug":"edge/product/1","segment":"edge"},"path":"/streaming"}],["$","$L8","/streamingnode/product/1",{"item":{"text":"Node Runtime","slug":"node/product/1","segment":"node"},"path":"/streaming"}]]}]}],["$","div",null,{"children":["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children","streaming","children"],"hasLoading":false,"template":["$","$L6",null,{}],"childProp":{"current":["$L9",null,null,[]],"segment":""}}]}]]}]
9:["$","div",null,{"className":"prose prose-sm prose-invert max-w-none","children":[["$","h1",null,{"className":"text-xl font-bold","children":"Streaming with Suspense"}],["$","ul",null,{"children":[["$","li",null,{"children":"Streaming allows you to progressively render and send units of the UI from the server to the client."}],["$","li",null,{"children":"This allows the user to see and interact with the most essential parts of the page while the rest of the content loads - instead of waiting for the whole page to load before they can interact with anything."}],["$","li",null,{"children":"Streaming works with both Edge and Node runtimes."}],["$","li",null,{"children":["Try streaming by ",["$","strong",null,{"children":"selecting a runtime"}]," in the navigation above."]}]]}],["$","div",null,{"className":"flex gap-2","children":[["$","a",null,{"href":"https://beta.nextjs.org/docs/data-fetching/streaming-and-suspense","className":"inline-flex gap-x-2 rounded-lg bg-gray-700 px-3 py-1 text-sm font-medium text-gray-100 no-underline hover:bg-gray-500 hover:text-white","children":[["$","div",null,{"children":"Docs"}],["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","fill":"none","viewBox":"0 0 24 24","strokeWidth":2,"stroke":"currentColor","aria-hidden":"true","className":"block w-4","children":["$","path",null,{"strokeLinecap":"round","strokeLinejoin":"round","d":"M14 5l7 7m0 0l-7 7m7-7H3"}]}]]}],["$","a",null,{"href":"https://github.com/vercel/app-playground/tree/main/app/streaming","className":"inline-flex gap-x-2 rounded-lg bg-gray-700 px-3 py-1 text-sm font-medium text-gray-100 no-underline hover:bg-gray-500 hover:text-white","children":[["$","div",null,{"children":"Code"}],["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","fill":"none","viewBox":"0 0 24 24","strokeWidth":2,"stroke":"currentColor","aria-hidden":"true","className":"block w-4","children":["$","path",null,{"strokeLinecap":"round","strokeLinejoin":"round","d":"M14 5l7 7m0 0l-7 7m7-7H3"}]}]]}]]}]]}]