[{"data":1,"prerenderedAt":2440},["ShallowReactive",2],{"navigation":3,"examples-nav":398,"-examples-vite-ssr-react":499,"-examples-vite-ssr-react-surround":2437},[4,93,222,228,383,395],{"title":5,"path":6,"stem":7,"children":8,"icon":92},"","/docs","1.docs/1.index",[9,12,17,22,27,32,37,42,47,52,57,62,67,72,77,82,87],{"title":10,"path":6,"stem":7,"icon":11},"Introduction","i-lucide-compass",{"title":13,"path":14,"stem":15,"icon":16},"Quick Start","/docs/quick-start","1.docs/2.quick-start","i-lucide-zap",{"title":18,"path":19,"stem":20,"icon":21},"Renderer","/docs/renderer","1.docs/4.renderer","ri:layout-masonry-line",{"title":23,"path":24,"stem":25,"icon":26},"Routing","/docs/routing","1.docs/5.routing","ri:direction-line",{"title":28,"path":29,"stem":30,"icon":31},"Assets","/docs/assets","1.docs/50.assets","ri:image-2-line",{"title":33,"path":34,"stem":35,"icon":36},"Configuration","/docs/configuration","1.docs/50.configuration","ri:settings-3-line",{"title":38,"path":39,"stem":40,"icon":41},"Database","/docs/database","1.docs/50.database","ri:database-2-line",{"title":43,"path":44,"stem":45,"icon":46},"Lifecycle","/docs/lifecycle","1.docs/50.lifecycle","i-lucide-layers",{"title":48,"path":49,"stem":50,"icon":51},"OpenAPI","/docs/openapi","1.docs/50.openapi","ri:contract-line",{"title":53,"path":54,"stem":55,"icon":56},"Plugins","/docs/plugins","1.docs/50.plugins","ri:plug-line",{"title":58,"path":59,"stem":60,"icon":61},"Tasks","/docs/tasks","1.docs/50.tasks","codicon:run-all",{"title":63,"path":64,"stem":65,"icon":66},"WebSocket","/docs/websocket","1.docs/50.websocket","ri:broadcast-fill",{"title":68,"path":69,"stem":70,"icon":71},"Server Entry","/docs/server-entry","1.docs/6.server-entry","ri:server-line",{"title":73,"path":74,"stem":75,"icon":76},"Cache","/docs/cache","1.docs/7.cache","ri:speed-line",{"title":78,"path":79,"stem":80,"icon":81},"KV Storage","/docs/storage","1.docs/8.storage","carbon:datastore",{"title":83,"path":84,"stem":85,"icon":86},"Migration Guide","/docs/migration","1.docs/99.migration","ri:arrow-right-up-line",{"title":88,"path":89,"stem":90,"icon":91},"Nightly Channel","/docs/nightly","1.docs/99.nightly","ri:moon-fill","i-lucide-book-open",{"title":94,"path":95,"stem":96,"children":97,"icon":99},"Deploy","/deploy","2.deploy/0.index",[98,100,121],{"title":94,"path":95,"stem":96,"icon":99},"ri:upload-cloud-2-line",{"title":101,"path":102,"stem":103,"children":104,"page":120},"Runtimes","/deploy/runtimes","2.deploy/10.runtimes",[105,110,115],{"title":106,"path":107,"stem":108,"icon":109},"Node.js","/deploy/runtimes/node","2.deploy/10.runtimes/1.node","akar-icons:node-fill",{"title":111,"path":112,"stem":113,"icon":114},"Bun","/deploy/runtimes/bun","2.deploy/10.runtimes/bun","simple-icons:bun",{"title":116,"path":117,"stem":118,"icon":119},"Deno","/deploy/runtimes/deno","2.deploy/10.runtimes/deno","simple-icons:deno",false,{"title":122,"path":123,"stem":124,"children":125,"page":120},"Providers","/deploy/providers","2.deploy/20.providers",[126,130,134,138,142,146,150,154,158,162,166,170,174,178,182,186,190,194,198,202,206,210,214,218],{"title":127,"path":128,"stem":129},"Alwaysdata","/deploy/providers/alwaysdata","2.deploy/20.providers/alwaysdata",{"title":131,"path":132,"stem":133},"AWS Lambda","/deploy/providers/aws","2.deploy/20.providers/aws",{"title":135,"path":136,"stem":137},"AWS Amplify","/deploy/providers/aws-amplify","2.deploy/20.providers/aws-amplify",{"title":139,"path":140,"stem":141},"Azure","/deploy/providers/azure","2.deploy/20.providers/azure",{"title":143,"path":144,"stem":145},"Cleavr","/deploy/providers/cleavr","2.deploy/20.providers/cleavr",{"title":147,"path":148,"stem":149},"Cloudflare","/deploy/providers/cloudflare","2.deploy/20.providers/cloudflare",{"title":151,"path":152,"stem":153},"Deno Deploy","/deploy/providers/deno-deploy","2.deploy/20.providers/deno-deploy",{"title":155,"path":156,"stem":157},"DigitalOcean","/deploy/providers/digitalocean","2.deploy/20.providers/digitalocean",{"title":159,"path":160,"stem":161},"Firebase","/deploy/providers/firebase","2.deploy/20.providers/firebase",{"title":163,"path":164,"stem":165},"Flightcontrol","/deploy/providers/flightcontrol","2.deploy/20.providers/flightcontrol",{"title":167,"path":168,"stem":169},"Genezio","/deploy/providers/genezio","2.deploy/20.providers/genezio",{"title":171,"path":172,"stem":173},"GitHub Pages","/deploy/providers/github-pages","2.deploy/20.providers/github-pages",{"title":175,"path":176,"stem":177},"GitLab Pages","/deploy/providers/gitlab-pages","2.deploy/20.providers/gitlab-pages",{"title":179,"path":180,"stem":181},"Heroku","/deploy/providers/heroku","2.deploy/20.providers/heroku",{"title":183,"path":184,"stem":185},"IIS","/deploy/providers/iis","2.deploy/20.providers/iis",{"title":187,"path":188,"stem":189},"Koyeb","/deploy/providers/koyeb","2.deploy/20.providers/koyeb",{"title":191,"path":192,"stem":193},"Netlify","/deploy/providers/netlify","2.deploy/20.providers/netlify",{"title":195,"path":196,"stem":197},"Platform.sh","/deploy/providers/platform-sh","2.deploy/20.providers/platform-sh",{"title":199,"path":200,"stem":201},"Render.com","/deploy/providers/render","2.deploy/20.providers/render",{"title":203,"path":204,"stem":205},"StormKit","/deploy/providers/stormkit","2.deploy/20.providers/stormkit",{"title":207,"path":208,"stem":209},"Vercel","/deploy/providers/vercel","2.deploy/20.providers/vercel",{"title":211,"path":212,"stem":213},"Zeabur","/deploy/providers/zeabur","2.deploy/20.providers/zeabur",{"title":215,"path":216,"stem":217},"Zephyr Cloud","/deploy/providers/zephyr","2.deploy/20.providers/zephyr",{"title":219,"path":220,"stem":221},"Zerops","/deploy/providers/zerops","2.deploy/20.providers/zerops",{"title":223,"path":224,"stem":225,"children":226,"icon":36},"Config","/config","3.config/0.index",[227],{"title":223,"path":224,"stem":225,"icon":36},{"title":229,"path":230,"stem":231,"children":232,"icon":234},"Examples","/examples","4.examples/0.index",[233,235,240,245,250,255,259,264,269,274,279,284,289,293,298,302,306,311,316,321,326,331,336,341,346,351,355,360,365,369,374,379],{"title":229,"path":230,"stem":231,"icon":234},"i-lucide-folder-code",{"title":236,"path":237,"stem":238,"icon":239},"API Routes","/examples/api-routes","4.examples/api-routes","i-lucide-route",{"title":241,"path":242,"stem":243,"icon":244},"Auto Imports","/examples/auto-imports","4.examples/auto-imports","i-lucide-import",{"title":246,"path":247,"stem":248,"icon":249},"Cached Handler","/examples/cached-handler","4.examples/cached-handler","i-lucide-clock",{"title":251,"path":252,"stem":253,"icon":254},"Custom Error Handler","/examples/custom-error-handler","4.examples/custom-error-handler","i-lucide-alert-circle",{"title":38,"path":256,"stem":257,"icon":258},"/examples/database","4.examples/database","i-lucide-database",{"title":260,"path":261,"stem":262,"icon":263},"Elysia","/examples/elysia","4.examples/elysia","i-skill-icons-elysia-dark",{"title":265,"path":266,"stem":267,"icon":268},"Express","/examples/express","4.examples/express","i-simple-icons-express",{"title":270,"path":271,"stem":272,"icon":273},"Fastify","/examples/fastify","4.examples/fastify","i-simple-icons-fastify",{"title":275,"path":276,"stem":277,"icon":278},"Hello World","/examples/hello-world","4.examples/hello-world","i-lucide-sparkles",{"title":280,"path":281,"stem":282,"icon":283},"Hono","/examples/hono","4.examples/hono","i-logos-hono",{"title":285,"path":286,"stem":287,"icon":288},"Import Alias","/examples/import-alias","4.examples/import-alias","i-lucide-at-sign",{"title":290,"path":291,"stem":292,"icon":46},"Middleware","/examples/middleware","4.examples/middleware",{"title":294,"path":295,"stem":296,"icon":297},"Mono JSX","/examples/mono-jsx","4.examples/mono-jsx","i-lucide-brackets",{"title":299,"path":300,"stem":301,"icon":297},"Nano JSX","/examples/nano-jsx","4.examples/nano-jsx",{"title":53,"path":303,"stem":304,"icon":305},"/examples/plugins","4.examples/plugins","i-lucide-plug",{"title":307,"path":308,"stem":309,"icon":310},"Custom Renderer","/examples/renderer","4.examples/renderer","i-lucide-code",{"title":312,"path":313,"stem":314,"icon":315},"Runtime Config","/examples/runtime-config","4.examples/runtime-config","i-lucide-settings",{"title":317,"path":318,"stem":319,"icon":320},"Server Fetch","/examples/server-fetch","4.examples/server-fetch","i-lucide-arrow-right-left",{"title":322,"path":323,"stem":324,"icon":325},"Shiki","/examples/shiki","4.examples/shiki","i-lucide-highlighter",{"title":327,"path":328,"stem":329,"icon":330},"Virtual Routes","/examples/virtual-routes","4.examples/virtual-routes","i-lucide-box",{"title":332,"path":333,"stem":334,"icon":335},"Vite Nitro Plugin","/examples/vite-nitro-plugin","4.examples/vite-nitro-plugin","i-logos-vitejs",{"title":337,"path":338,"stem":339,"icon":340},"Vite RSC","/examples/vite-rsc","4.examples/vite-rsc","i-logos-react",{"title":342,"path":343,"stem":344,"icon":345},"Vite SSR HTML","/examples/vite-ssr-html","4.examples/vite-ssr-html","i-logos-html-5",{"title":347,"path":348,"stem":349,"icon":350},"SSR with Preact","/examples/vite-ssr-preact","4.examples/vite-ssr-preact","i-logos-preact",{"title":352,"path":353,"stem":354,"icon":340},"SSR with React","/examples/vite-ssr-react","4.examples/vite-ssr-react",{"title":356,"path":357,"stem":358,"icon":359},"SSR with SolidJS","/examples/vite-ssr-solid","4.examples/vite-ssr-solid","i-logos-solidjs-icon",{"title":361,"path":362,"stem":363,"icon":364},"SSR with TanStack Router","/examples/vite-ssr-tsr-react","4.examples/vite-ssr-tsr-react","i-simple-icons-tanstack",{"title":366,"path":367,"stem":368,"icon":364},"SSR with TanStack Start","/examples/vite-ssr-tss-react","4.examples/vite-ssr-tss-react",{"title":370,"path":371,"stem":372,"icon":373},"SSR with Vue Router","/examples/vite-ssr-vue-router","4.examples/vite-ssr-vue-router","i-logos-vue",{"title":375,"path":376,"stem":377,"icon":378},"Vite + tRPC","/examples/vite-trpc","4.examples/vite-trpc","i-simple-icons-trpc",{"title":63,"path":380,"stem":381,"icon":382},"/examples/websocket","4.examples/websocket","i-lucide-radio",{"title":384,"path":385,"stem":386,"children":387},"Blog","/blog","9.blog",[388,391],{"title":384,"path":385,"stem":389,"icon":390},"9.blog/index","i-lucide-file-text",{"title":392,"path":393,"stem":394,"icon":390},"Nitro v3 Beta is here!","/blog/v3-beta","9.blog/1.v3-beta",{"title":5,"path":396,"stem":397},"/","index",[399,404,408,411,414,417,421,424,427,430,433,436,439,443,446,449,452,455,458,462,465,469,472,475,478,481,484,487,490,493,496],{"title":236,"description":400,"meta":401,"path":237},"File-based API routing with HTTP method support and dynamic parameters.",{"automd":402,"category":403,"icon":239},true,"features",{"title":241,"description":405,"meta":406,"path":242},"Automatic imports for utilities and composables.",{"automd":402,"category":407,"icon":244},"config",{"title":246,"description":409,"meta":410,"path":247},"Cache route responses with configurable bypass logic.",{"automd":402,"category":403,"icon":249},{"title":251,"description":412,"meta":413,"path":252},"Customize error responses with a global error handler.",{"automd":402,"category":403,"icon":254},{"title":38,"description":415,"meta":416,"path":256},"Built-in database support with SQL template literals.",{"automd":402,"category":403,"icon":258},{"title":260,"description":418,"meta":419,"path":261},"Integrate Elysia with Nitro using the server entry.",{"automd":402,"category":420,"icon":263},"backend frameworks",{"title":265,"description":422,"meta":423,"path":266},"Integrate Express with Nitro using the server entry.",{"automd":402,"category":420,"icon":268},{"title":270,"description":425,"meta":426,"path":271},"Integrate Fastify with Nitro using the server entry.",{"automd":402,"category":420,"icon":273},{"title":275,"description":428,"meta":429,"path":276},"Minimal Nitro server using the web standard fetch handler.",{"automd":402,"category":403,"icon":278},{"title":280,"description":431,"meta":432,"path":281},"Integrate Hono with Nitro using the server entry.",{"automd":402,"category":420,"icon":283},{"title":285,"description":434,"meta":435,"path":286},"Custom import aliases for cleaner module paths.",{"automd":402,"category":407,"icon":288},{"title":290,"description":437,"meta":438,"path":291},"Request middleware for authentication, logging, and request modification.",{"automd":402,"category":403,"icon":46},{"title":294,"description":440,"meta":441,"path":295},"Server-side JSX rendering in Nitro with mono-jsx.",{"automd":402,"category":442,"icon":297},"server side rendering",{"title":299,"description":444,"meta":445,"path":300},"Server-side JSX rendering in Nitro with nano-jsx.",{"automd":402,"category":442,"icon":297},{"title":53,"description":447,"meta":448,"path":303},"Extend Nitro with custom plugins for hooks and lifecycle events.",{"automd":402,"category":403,"icon":305},{"title":307,"description":450,"meta":451,"path":308},"Build a custom HTML renderer in Nitro with server-side data fetching.",{"automd":402,"category":442,"icon":310},{"title":312,"description":453,"meta":454,"path":313},"Environment-aware configuration with runtime access.",{"automd":402,"category":407,"icon":315},{"title":317,"description":456,"meta":457,"path":318},"Internal server-to-server requests without network overhead.",{"automd":402,"category":403,"icon":320},{"title":322,"description":459,"meta":460,"path":323},"Server-side syntax highlighting in Nitro with Shiki.",{"automd":402,"category":461,"icon":325},"integrations",{"title":327,"description":463,"meta":464,"path":328},"Define routes programmatically using Nitro's virtual module system.",{"automd":402,"category":403,"icon":330},{"title":332,"description":466,"meta":467,"path":333},"Use Nitro as a Vite plugin for programmatic configuration.",{"automd":402,"category":468,"icon":335},"vite",{"title":337,"description":470,"meta":471,"path":338},"React Server Components with Vite and Nitro.",{"automd":402,"category":468,"icon":340},{"title":342,"description":473,"meta":474,"path":343},"Server-side rendering with vanilla HTML, Vite, and Nitro.",{"automd":402,"category":442,"icon":345},{"title":347,"description":476,"meta":477,"path":348},"Server-side rendering with Preact in Nitro using Vite.",{"automd":402,"category":442,"icon":350},{"title":352,"description":479,"meta":480,"path":353},"Server-side rendering with React in Nitro using Vite.",{"automd":402,"category":442,"icon":340},{"title":356,"description":482,"meta":483,"path":357},"Server-side rendering with SolidJS in Nitro using Vite.",{"automd":402,"category":442,"icon":359},{"title":361,"description":485,"meta":486,"path":362},"Client-side routing with TanStack Router in Nitro using Vite.",{"automd":402,"category":442,"icon":364},{"title":366,"description":488,"meta":489,"path":367},"Full-stack React with TanStack Start in Nitro using Vite.",{"automd":402,"category":442,"icon":364},{"title":370,"description":491,"meta":492,"path":371},"Server-side rendering with Vue Router in Nitro using Vite.",{"automd":402,"category":442,"icon":373},{"title":375,"description":494,"meta":495,"path":376},"End-to-end typesafe APIs with tRPC in Nitro using Vite.",{"automd":402,"category":468,"icon":378},{"title":63,"description":497,"meta":498,"path":380},"Real-time bidirectional communication with WebSocket support.",{"automd":402,"category":403,"icon":382},{"id":500,"title":352,"body":501,"description":479,"extension":2432,"meta":2433,"navigation":2434,"path":353,"seo":2435,"stem":354,"__hash__":2436},"content/4.examples/vite-ssr-react.md",{"type":502,"value":503,"toc":2424,"icon":340},"minimark",[504,1654,1658,1663,1680,1684,1691,1785,1800,1804,1807,1937,1941,1948,2302,2325,2329,2332,2394,2403,2407,2420],[505,506,509,718,777,903,1078,1156,1597],"code-tree",{":expand-all":507,"default-value":508},"true","src/entry-server.tsx",[510,511,516],"pre",{"className":512,"code":513,"filename":514,"language":515,"meta":5,"style":5},"language-json shiki shiki-themes github-light github-dark github-dark","{\n  \"type\": \"module\",\n  \"scripts\": {\n    \"build\": \"vite build\",\n    \"preview\": \"vite preview\",\n    \"dev\": \"vite dev\"\n  },\n  \"devDependencies\": {\n    \"@types/react\": \"^19.2.14\",\n    \"@types/react-dom\": \"^19.2.3\",\n    \"@vitejs/plugin-react\": \"^6.0.1\",\n    \"nitro\": \"latest\",\n    \"react\": \"^19.2.4\",\n    \"react-dom\": \"^19.2.4\",\n    \"react-refresh\": \"^0.18.0\",\n    \"vite\": \"latest\"\n  }\n}\n","package.json","json",[517,518,519,528,545,554,567,580,591,597,605,618,631,644,657,670,682,695,706,712],"code",{"__ignoreMap":5},[520,521,524],"span",{"class":522,"line":523},"line",1,[520,525,527],{"class":526},"slsVL","{\n",[520,529,531,535,538,542],{"class":522,"line":530},2,[520,532,534],{"class":533},"suiK_","  \"type\"",[520,536,537],{"class":526},": ",[520,539,541],{"class":540},"sfrk1","\"module\"",[520,543,544],{"class":526},",\n",[520,546,548,551],{"class":522,"line":547},3,[520,549,550],{"class":533},"  \"scripts\"",[520,552,553],{"class":526},": {\n",[520,555,557,560,562,565],{"class":522,"line":556},4,[520,558,559],{"class":533},"    \"build\"",[520,561,537],{"class":526},[520,563,564],{"class":540},"\"vite build\"",[520,566,544],{"class":526},[520,568,570,573,575,578],{"class":522,"line":569},5,[520,571,572],{"class":533},"    \"preview\"",[520,574,537],{"class":526},[520,576,577],{"class":540},"\"vite preview\"",[520,579,544],{"class":526},[520,581,583,586,588],{"class":522,"line":582},6,[520,584,585],{"class":533},"    \"dev\"",[520,587,537],{"class":526},[520,589,590],{"class":540},"\"vite dev\"\n",[520,592,594],{"class":522,"line":593},7,[520,595,596],{"class":526},"  },\n",[520,598,600,603],{"class":522,"line":599},8,[520,601,602],{"class":533},"  \"devDependencies\"",[520,604,553],{"class":526},[520,606,608,611,613,616],{"class":522,"line":607},9,[520,609,610],{"class":533},"    \"@types/react\"",[520,612,537],{"class":526},[520,614,615],{"class":540},"\"^19.2.14\"",[520,617,544],{"class":526},[520,619,621,624,626,629],{"class":522,"line":620},10,[520,622,623],{"class":533},"    \"@types/react-dom\"",[520,625,537],{"class":526},[520,627,628],{"class":540},"\"^19.2.3\"",[520,630,544],{"class":526},[520,632,634,637,639,642],{"class":522,"line":633},11,[520,635,636],{"class":533},"    \"@vitejs/plugin-react\"",[520,638,537],{"class":526},[520,640,641],{"class":540},"\"^6.0.1\"",[520,643,544],{"class":526},[520,645,647,650,652,655],{"class":522,"line":646},12,[520,648,649],{"class":533},"    \"nitro\"",[520,651,537],{"class":526},[520,653,654],{"class":540},"\"latest\"",[520,656,544],{"class":526},[520,658,660,663,665,668],{"class":522,"line":659},13,[520,661,662],{"class":533},"    \"react\"",[520,664,537],{"class":526},[520,666,667],{"class":540},"\"^19.2.4\"",[520,669,544],{"class":526},[520,671,673,676,678,680],{"class":522,"line":672},14,[520,674,675],{"class":533},"    \"react-dom\"",[520,677,537],{"class":526},[520,679,667],{"class":540},[520,681,544],{"class":526},[520,683,685,688,690,693],{"class":522,"line":684},15,[520,686,687],{"class":533},"    \"react-refresh\"",[520,689,537],{"class":526},[520,691,692],{"class":540},"\"^0.18.0\"",[520,694,544],{"class":526},[520,696,698,701,703],{"class":522,"line":697},16,[520,699,700],{"class":533},"    \"vite\"",[520,702,537],{"class":526},[520,704,705],{"class":540},"\"latest\"\n",[520,707,709],{"class":522,"line":708},17,[520,710,711],{"class":526},"  }\n",[520,713,715],{"class":522,"line":714},18,[520,716,717],{"class":526},"}\n",[510,719,722],{"className":512,"code":720,"filename":721,"language":515,"meta":5,"style":5},"{\n  \"extends\": \"nitro/tsconfig\",\n  \"compilerOptions\": {\n    \"jsx\": \"react-jsx\",\n    \"jsxImportSource\": \"react\"\n  }\n}\n","tsconfig.json",[517,723,724,728,740,747,759,769,773],{"__ignoreMap":5},[520,725,726],{"class":522,"line":523},[520,727,527],{"class":526},[520,729,730,733,735,738],{"class":522,"line":530},[520,731,732],{"class":533},"  \"extends\"",[520,734,537],{"class":526},[520,736,737],{"class":540},"\"nitro/tsconfig\"",[520,739,544],{"class":526},[520,741,742,745],{"class":522,"line":547},[520,743,744],{"class":533},"  \"compilerOptions\"",[520,746,553],{"class":526},[520,748,749,752,754,757],{"class":522,"line":556},[520,750,751],{"class":533},"    \"jsx\"",[520,753,537],{"class":526},[520,755,756],{"class":540},"\"react-jsx\"",[520,758,544],{"class":526},[520,760,761,764,766],{"class":522,"line":569},[520,762,763],{"class":533},"    \"jsxImportSource\"",[520,765,537],{"class":526},[520,767,768],{"class":540},"\"react\"\n",[520,770,771],{"class":522,"line":582},[520,772,711],{"class":526},[520,774,775],{"class":522,"line":593},[520,776,717],{"class":526},[510,778,783],{"className":779,"code":780,"filename":781,"language":782,"meta":5,"style":5},"language-js shiki shiki-themes github-light github-dark github-dark","import { defineConfig } from \"vite\";\nimport { nitro } from \"nitro/vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({\n  plugins: [nitro(), react()],\n  environments: {\n    client: {\n      build: { rollupOptions: { input: \"./src/entry-client.tsx\" } },\n    },\n  },\n});\n","vite.config.mjs","js",[517,784,785,803,817,831,836,851,868,873,878,889,894,898],{"__ignoreMap":5},[520,786,787,791,794,797,800],{"class":522,"line":523},[520,788,790],{"class":789},"so5gQ","import",[520,792,793],{"class":526}," { defineConfig } ",[520,795,796],{"class":789},"from",[520,798,799],{"class":540}," \"vite\"",[520,801,802],{"class":526},";\n",[520,804,805,807,810,812,815],{"class":522,"line":530},[520,806,790],{"class":789},[520,808,809],{"class":526}," { nitro } ",[520,811,796],{"class":789},[520,813,814],{"class":540}," \"nitro/vite\"",[520,816,802],{"class":526},[520,818,819,821,824,826,829],{"class":522,"line":547},[520,820,790],{"class":789},[520,822,823],{"class":526}," react ",[520,825,796],{"class":789},[520,827,828],{"class":540}," \"@vitejs/plugin-react\"",[520,830,802],{"class":526},[520,832,833],{"class":522,"line":556},[520,834,835],{"emptyLinePlaceholder":402},"\n",[520,837,838,841,844,848],{"class":522,"line":569},[520,839,840],{"class":789},"export",[520,842,843],{"class":789}," default",[520,845,847],{"class":846},"shcOC"," defineConfig",[520,849,850],{"class":526},"({\n",[520,852,853,856,859,862,865],{"class":522,"line":582},[520,854,855],{"class":526},"  plugins: [",[520,857,858],{"class":846},"nitro",[520,860,861],{"class":526},"(), ",[520,863,864],{"class":846},"react",[520,866,867],{"class":526},"()],\n",[520,869,870],{"class":522,"line":593},[520,871,872],{"class":526},"  environments: {\n",[520,874,875],{"class":522,"line":599},[520,876,877],{"class":526},"    client: {\n",[520,879,880,883,886],{"class":522,"line":607},[520,881,882],{"class":526},"      build: { rollupOptions: { input: ",[520,884,885],{"class":540},"\"./src/entry-client.tsx\"",[520,887,888],{"class":526}," } },\n",[520,890,891],{"class":522,"line":620},[520,892,893],{"class":526},"    },\n",[520,895,896],{"class":522,"line":633},[520,897,596],{"class":526},[520,899,900],{"class":522,"line":646},[520,901,902],{"class":526},"});\n",[510,904,909],{"className":905,"code":906,"filename":907,"language":908,"meta":5,"style":5},"language-tsx shiki shiki-themes github-light github-dark github-dark","import { useState } from \"react\";\n\nexport function App() {\n  const [count, setCount] = useState(0);\n  return (\n    \u003C>\n      \u003Ch1 className=\"hero\">Nitro + Vite + React\u003C/h1>\n      \u003Cbutton onClick={() => setCount((c) => c + 1)}>Count is {count}\u003C/button>\n    \u003C/>\n  );\n}\n","src/app.tsx","tsx",[517,910,911,925,929,942,977,985,990,1015,1064,1069,1074],{"__ignoreMap":5},[520,912,913,915,918,920,923],{"class":522,"line":523},[520,914,790],{"class":789},[520,916,917],{"class":526}," { useState } ",[520,919,796],{"class":789},[520,921,922],{"class":540}," \"react\"",[520,924,802],{"class":526},[520,926,927],{"class":522,"line":530},[520,928,835],{"emptyLinePlaceholder":402},[520,930,931,933,936,939],{"class":522,"line":547},[520,932,840],{"class":789},[520,934,935],{"class":789}," function",[520,937,938],{"class":846}," App",[520,940,941],{"class":526},"() {\n",[520,943,944,947,950,953,956,959,962,965,968,971,974],{"class":522,"line":556},[520,945,946],{"class":789},"  const",[520,948,949],{"class":526}," [",[520,951,952],{"class":533},"count",[520,954,955],{"class":526},", ",[520,957,958],{"class":533},"setCount",[520,960,961],{"class":526},"] ",[520,963,964],{"class":789},"=",[520,966,967],{"class":846}," useState",[520,969,970],{"class":526},"(",[520,972,973],{"class":533},"0",[520,975,976],{"class":526},");\n",[520,978,979,982],{"class":522,"line":569},[520,980,981],{"class":789},"  return",[520,983,984],{"class":526}," (\n",[520,986,987],{"class":522,"line":582},[520,988,989],{"class":526},"    \u003C>\n",[520,991,992,995,999,1002,1004,1007,1010,1012],{"class":522,"line":593},[520,993,994],{"class":526},"      \u003C",[520,996,998],{"class":997},"sByVh","h1",[520,1000,1001],{"class":846}," className",[520,1003,964],{"class":789},[520,1005,1006],{"class":540},"\"hero\"",[520,1008,1009],{"class":526},">Nitro + Vite + React\u003C/",[520,1011,998],{"class":997},[520,1013,1014],{"class":526},">\n",[520,1016,1017,1019,1022,1025,1027,1030,1033,1036,1039,1043,1046,1048,1051,1054,1057,1060,1062],{"class":522,"line":599},[520,1018,994],{"class":526},[520,1020,1021],{"class":997},"button",[520,1023,1024],{"class":846}," onClick",[520,1026,964],{"class":789},[520,1028,1029],{"class":526},"{() ",[520,1031,1032],{"class":789},"=>",[520,1034,1035],{"class":846}," setCount",[520,1037,1038],{"class":526},"((",[520,1040,1042],{"class":1041},"sQHwn","c",[520,1044,1045],{"class":526},") ",[520,1047,1032],{"class":789},[520,1049,1050],{"class":526}," c ",[520,1052,1053],{"class":789},"+",[520,1055,1056],{"class":533}," 1",[520,1058,1059],{"class":526},")}>Count is {count}\u003C/",[520,1061,1021],{"class":997},[520,1063,1014],{"class":526},[520,1065,1066],{"class":522,"line":607},[520,1067,1068],{"class":526},"    \u003C/>\n",[520,1070,1071],{"class":522,"line":620},[520,1072,1073],{"class":526},"  );\n",[520,1075,1076],{"class":522,"line":633},[520,1077,717],{"class":526},[510,1079,1082],{"className":905,"code":1080,"filename":1081,"language":908,"meta":5,"style":5},"import \"@vitejs/plugin-react/preamble\";\nimport { hydrateRoot } from \"react-dom/client\";\nimport { App } from \"./app.tsx\";\n\nhydrateRoot(document.querySelector(\"#app\")!, \u003CApp />);\n","src/entry-client.tsx",[517,1083,1084,1093,1107,1121,1125],{"__ignoreMap":5},[520,1085,1086,1088,1091],{"class":522,"line":523},[520,1087,790],{"class":789},[520,1089,1090],{"class":540}," \"@vitejs/plugin-react/preamble\"",[520,1092,802],{"class":526},[520,1094,1095,1097,1100,1102,1105],{"class":522,"line":530},[520,1096,790],{"class":789},[520,1098,1099],{"class":526}," { hydrateRoot } ",[520,1101,796],{"class":789},[520,1103,1104],{"class":540}," \"react-dom/client\"",[520,1106,802],{"class":526},[520,1108,1109,1111,1114,1116,1119],{"class":522,"line":547},[520,1110,790],{"class":789},[520,1112,1113],{"class":526}," { App } ",[520,1115,796],{"class":789},[520,1117,1118],{"class":540}," \"./app.tsx\"",[520,1120,802],{"class":526},[520,1122,1123],{"class":522,"line":556},[520,1124,835],{"emptyLinePlaceholder":402},[520,1126,1127,1130,1133,1136,1138,1141,1144,1147,1150,1153],{"class":522,"line":569},[520,1128,1129],{"class":846},"hydrateRoot",[520,1131,1132],{"class":526},"(document.",[520,1134,1135],{"class":846},"querySelector",[520,1137,970],{"class":526},[520,1139,1140],{"class":540},"\"#app\"",[520,1142,1143],{"class":526},")",[520,1145,1146],{"class":789},"!",[520,1148,1149],{"class":526},", \u003C",[520,1151,1152],{"class":533},"App",[520,1154,1155],{"class":526}," />);\n",[510,1157,1159],{"className":905,"code":1158,"filename":508,"language":908,"meta":5,"style":5},"import \"./styles.css\";\nimport { renderToReadableStream } from \"react-dom/server.edge\";\nimport { App } from \"./app.tsx\";\n\nimport clientAssets from \"./entry-client?assets=client\";\nimport serverAssets from \"./entry-server?assets=ssr\";\n\nexport default {\n  async fetch(_req: Request) {\n    const assets = clientAssets.merge(serverAssets);\n    return new Response(\n      await renderToReadableStream(\n        \u003Chtml lang=\"en\">\n          \u003Chead>\n            \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n            {assets.css.map((attr: any) => (\n              \u003Clink key={attr.href} rel=\"stylesheet\" {...attr} />\n            ))}\n            {assets.js.map((attr: any) => (\n              \u003Clink key={attr.href} type=\"modulepreload\" {...attr} />\n            ))}\n            \u003Cscript type=\"module\" src={assets.entry} />\n          \u003C/head>\n          \u003Cbody id=\"app\">\n            \u003CApp />\n          \u003C/body>\n        \u003C/html>\n      ),\n      { headers: { \"Content-Type\": \"text/html;charset=utf-8\" } }\n    );\n  },\n};\n",[517,1160,1161,1170,1184,1196,1200,1214,1228,1232,1241,1263,1283,1297,1307,1325,1335,1362,1386,1419,1424,1446,1473,1478,1501,1511,1529,1538,1547,1557,1563,1580,1586,1591],{"__ignoreMap":5},[520,1162,1163,1165,1168],{"class":522,"line":523},[520,1164,790],{"class":789},[520,1166,1167],{"class":540}," \"./styles.css\"",[520,1169,802],{"class":526},[520,1171,1172,1174,1177,1179,1182],{"class":522,"line":530},[520,1173,790],{"class":789},[520,1175,1176],{"class":526}," { renderToReadableStream } ",[520,1178,796],{"class":789},[520,1180,1181],{"class":540}," \"react-dom/server.edge\"",[520,1183,802],{"class":526},[520,1185,1186,1188,1190,1192,1194],{"class":522,"line":547},[520,1187,790],{"class":789},[520,1189,1113],{"class":526},[520,1191,796],{"class":789},[520,1193,1118],{"class":540},[520,1195,802],{"class":526},[520,1197,1198],{"class":522,"line":556},[520,1199,835],{"emptyLinePlaceholder":402},[520,1201,1202,1204,1207,1209,1212],{"class":522,"line":569},[520,1203,790],{"class":789},[520,1205,1206],{"class":526}," clientAssets ",[520,1208,796],{"class":789},[520,1210,1211],{"class":540}," \"./entry-client?assets=client\"",[520,1213,802],{"class":526},[520,1215,1216,1218,1221,1223,1226],{"class":522,"line":582},[520,1217,790],{"class":789},[520,1219,1220],{"class":526}," serverAssets ",[520,1222,796],{"class":789},[520,1224,1225],{"class":540}," \"./entry-server?assets=ssr\"",[520,1227,802],{"class":526},[520,1229,1230],{"class":522,"line":593},[520,1231,835],{"emptyLinePlaceholder":402},[520,1233,1234,1236,1238],{"class":522,"line":599},[520,1235,840],{"class":789},[520,1237,843],{"class":789},[520,1239,1240],{"class":526}," {\n",[520,1242,1243,1246,1249,1251,1254,1257,1260],{"class":522,"line":607},[520,1244,1245],{"class":789},"  async",[520,1247,1248],{"class":846}," fetch",[520,1250,970],{"class":526},[520,1252,1253],{"class":1041},"_req",[520,1255,1256],{"class":789},":",[520,1258,1259],{"class":846}," Request",[520,1261,1262],{"class":526},") {\n",[520,1264,1265,1268,1271,1274,1277,1280],{"class":522,"line":620},[520,1266,1267],{"class":789},"    const",[520,1269,1270],{"class":533}," assets",[520,1272,1273],{"class":789}," =",[520,1275,1276],{"class":526}," clientAssets.",[520,1278,1279],{"class":846},"merge",[520,1281,1282],{"class":526},"(serverAssets);\n",[520,1284,1285,1288,1291,1294],{"class":522,"line":633},[520,1286,1287],{"class":789},"    return",[520,1289,1290],{"class":789}," new",[520,1292,1293],{"class":846}," Response",[520,1295,1296],{"class":526},"(\n",[520,1298,1299,1302,1305],{"class":522,"line":646},[520,1300,1301],{"class":789},"      await",[520,1303,1304],{"class":846}," renderToReadableStream",[520,1306,1296],{"class":526},[520,1308,1309,1312,1315,1318,1320,1323],{"class":522,"line":659},[520,1310,1311],{"class":526},"        \u003C",[520,1313,1314],{"class":997},"html",[520,1316,1317],{"class":846}," lang",[520,1319,964],{"class":789},[520,1321,1322],{"class":540},"\"en\"",[520,1324,1014],{"class":526},[520,1326,1327,1330,1333],{"class":522,"line":672},[520,1328,1329],{"class":526},"          \u003C",[520,1331,1332],{"class":997},"head",[520,1334,1014],{"class":526},[520,1336,1337,1340,1343,1346,1348,1351,1354,1356,1359],{"class":522,"line":684},[520,1338,1339],{"class":526},"            \u003C",[520,1341,1342],{"class":997},"meta",[520,1344,1345],{"class":846}," name",[520,1347,964],{"class":789},[520,1349,1350],{"class":540},"\"viewport\"",[520,1352,1353],{"class":846}," content",[520,1355,964],{"class":789},[520,1357,1358],{"class":540},"\"width=device-width, initial-scale=1.0\"",[520,1360,1361],{"class":526}," />\n",[520,1363,1364,1367,1370,1372,1375,1377,1380,1382,1384],{"class":522,"line":697},[520,1365,1366],{"class":526},"            {assets.css.",[520,1368,1369],{"class":846},"map",[520,1371,1038],{"class":526},[520,1373,1374],{"class":1041},"attr",[520,1376,1256],{"class":789},[520,1378,1379],{"class":533}," any",[520,1381,1045],{"class":526},[520,1383,1032],{"class":789},[520,1385,984],{"class":526},[520,1387,1388,1391,1394,1397,1399,1402,1405,1407,1410,1413,1416],{"class":522,"line":708},[520,1389,1390],{"class":526},"              \u003C",[520,1392,1393],{"class":997},"link",[520,1395,1396],{"class":846}," key",[520,1398,964],{"class":789},[520,1400,1401],{"class":526},"{attr.href} ",[520,1403,1404],{"class":846},"rel",[520,1406,964],{"class":789},[520,1408,1409],{"class":540},"\"stylesheet\"",[520,1411,1412],{"class":526}," {",[520,1414,1415],{"class":789},"...",[520,1417,1418],{"class":526},"attr} />\n",[520,1420,1421],{"class":522,"line":714},[520,1422,1423],{"class":526},"            ))}\n",[520,1425,1427,1430,1432,1434,1436,1438,1440,1442,1444],{"class":522,"line":1426},19,[520,1428,1429],{"class":526},"            {assets.js.",[520,1431,1369],{"class":846},[520,1433,1038],{"class":526},[520,1435,1374],{"class":1041},[520,1437,1256],{"class":789},[520,1439,1379],{"class":533},[520,1441,1045],{"class":526},[520,1443,1032],{"class":789},[520,1445,984],{"class":526},[520,1447,1449,1451,1453,1455,1457,1459,1462,1464,1467,1469,1471],{"class":522,"line":1448},20,[520,1450,1390],{"class":526},[520,1452,1393],{"class":997},[520,1454,1396],{"class":846},[520,1456,964],{"class":789},[520,1458,1401],{"class":526},[520,1460,1461],{"class":846},"type",[520,1463,964],{"class":789},[520,1465,1466],{"class":540},"\"modulepreload\"",[520,1468,1412],{"class":526},[520,1470,1415],{"class":789},[520,1472,1418],{"class":526},[520,1474,1476],{"class":522,"line":1475},21,[520,1477,1423],{"class":526},[520,1479,1481,1483,1486,1489,1491,1493,1496,1498],{"class":522,"line":1480},22,[520,1482,1339],{"class":526},[520,1484,1485],{"class":997},"script",[520,1487,1488],{"class":846}," type",[520,1490,964],{"class":789},[520,1492,541],{"class":540},[520,1494,1495],{"class":846}," src",[520,1497,964],{"class":789},[520,1499,1500],{"class":526},"{assets.entry} />\n",[520,1502,1504,1507,1509],{"class":522,"line":1503},23,[520,1505,1506],{"class":526},"          \u003C/",[520,1508,1332],{"class":997},[520,1510,1014],{"class":526},[520,1512,1514,1516,1519,1522,1524,1527],{"class":522,"line":1513},24,[520,1515,1329],{"class":526},[520,1517,1518],{"class":997},"body",[520,1520,1521],{"class":846}," id",[520,1523,964],{"class":789},[520,1525,1526],{"class":540},"\"app\"",[520,1528,1014],{"class":526},[520,1530,1532,1534,1536],{"class":522,"line":1531},25,[520,1533,1339],{"class":526},[520,1535,1152],{"class":533},[520,1537,1361],{"class":526},[520,1539,1541,1543,1545],{"class":522,"line":1540},26,[520,1542,1506],{"class":526},[520,1544,1518],{"class":997},[520,1546,1014],{"class":526},[520,1548,1550,1553,1555],{"class":522,"line":1549},27,[520,1551,1552],{"class":526},"        \u003C/",[520,1554,1314],{"class":997},[520,1556,1014],{"class":526},[520,1558,1560],{"class":522,"line":1559},28,[520,1561,1562],{"class":526},"      ),\n",[520,1564,1566,1569,1572,1574,1577],{"class":522,"line":1565},29,[520,1567,1568],{"class":526},"      { headers: { ",[520,1570,1571],{"class":540},"\"Content-Type\"",[520,1573,537],{"class":526},[520,1575,1576],{"class":540},"\"text/html;charset=utf-8\"",[520,1578,1579],{"class":526}," } }\n",[520,1581,1583],{"class":522,"line":1582},30,[520,1584,1585],{"class":526},"    );\n",[520,1587,1589],{"class":522,"line":1588},31,[520,1590,596],{"class":526},[520,1592,1594],{"class":522,"line":1593},32,[520,1595,1596],{"class":526},"};\n",[510,1598,1603],{"className":1599,"code":1600,"filename":1601,"language":1602,"meta":5,"style":5},"language-css shiki shiki-themes github-light github-dark github-dark",".hero {\n  color: orange;\n}\n\nbutton {\n  background-color: lightskyblue;\n}\n","src/styles.css","css",[517,1604,1605,1612,1624,1628,1632,1638,1650],{"__ignoreMap":5},[520,1606,1607,1610],{"class":522,"line":523},[520,1608,1609],{"class":846},".hero",[520,1611,1240],{"class":526},[520,1613,1614,1617,1619,1622],{"class":522,"line":530},[520,1615,1616],{"class":533},"  color",[520,1618,537],{"class":526},[520,1620,1621],{"class":533},"orange",[520,1623,802],{"class":526},[520,1625,1626],{"class":522,"line":547},[520,1627,717],{"class":526},[520,1629,1630],{"class":522,"line":556},[520,1631,835],{"emptyLinePlaceholder":402},[520,1633,1634,1636],{"class":522,"line":569},[520,1635,1021],{"class":997},[520,1637,1240],{"class":526},[520,1639,1640,1643,1645,1648],{"class":522,"line":582},[520,1641,1642],{"class":533},"  background-color",[520,1644,537],{"class":526},[520,1646,1647],{"class":533},"lightskyblue",[520,1649,802],{"class":526},[520,1651,1652],{"class":522,"line":593},[520,1653,717],{"class":526},[1655,1656,1657],"p",{},"Set up server-side rendering (SSR) with React, Vite, and Nitro. This setup enables streaming HTML responses, automatic asset management, and client hydration.",[1659,1660,1662],"h2",{"id":1661},"overview","Overview",[1664,1665,1667,1671,1674,1677],"steps",{"level":1666},"4",[1668,1669,1670],"h4",{},"Add the Nitro Vite plugin to your Vite config",[1668,1672,1673],{},"Configure client and server entry points",[1668,1675,1676],{},"Create a server entry that renders your app to HTML",[1668,1678,1679],{},"Create a client entry that hydrates the server-rendered HTML",[1659,1681,1683],{"id":1682},"_1-configure-vite","1. Configure Vite",[1655,1685,1686,1687,1690],{},"Add the Nitro and React plugins to your Vite config. Define the ",[517,1688,1689],{},"client"," environment with your client entry point:",[510,1692,1693],{"className":779,"code":780,"filename":781,"language":782,"meta":5,"style":5},[517,1694,1695,1707,1719,1731,1735,1745,1757,1761,1765,1773,1777,1781],{"__ignoreMap":5},[520,1696,1697,1699,1701,1703,1705],{"class":522,"line":523},[520,1698,790],{"class":789},[520,1700,793],{"class":526},[520,1702,796],{"class":789},[520,1704,799],{"class":540},[520,1706,802],{"class":526},[520,1708,1709,1711,1713,1715,1717],{"class":522,"line":530},[520,1710,790],{"class":789},[520,1712,809],{"class":526},[520,1714,796],{"class":789},[520,1716,814],{"class":540},[520,1718,802],{"class":526},[520,1720,1721,1723,1725,1727,1729],{"class":522,"line":547},[520,1722,790],{"class":789},[520,1724,823],{"class":526},[520,1726,796],{"class":789},[520,1728,828],{"class":540},[520,1730,802],{"class":526},[520,1732,1733],{"class":522,"line":556},[520,1734,835],{"emptyLinePlaceholder":402},[520,1736,1737,1739,1741,1743],{"class":522,"line":569},[520,1738,840],{"class":789},[520,1740,843],{"class":789},[520,1742,847],{"class":846},[520,1744,850],{"class":526},[520,1746,1747,1749,1751,1753,1755],{"class":522,"line":582},[520,1748,855],{"class":526},[520,1750,858],{"class":846},[520,1752,861],{"class":526},[520,1754,864],{"class":846},[520,1756,867],{"class":526},[520,1758,1759],{"class":522,"line":593},[520,1760,872],{"class":526},[520,1762,1763],{"class":522,"line":599},[520,1764,877],{"class":526},[520,1766,1767,1769,1771],{"class":522,"line":607},[520,1768,882],{"class":526},[520,1770,885],{"class":540},[520,1772,888],{"class":526},[520,1774,1775],{"class":522,"line":620},[520,1776,893],{"class":526},[520,1778,1779],{"class":522,"line":633},[520,1780,596],{"class":526},[520,1782,1783],{"class":522,"line":646},[520,1784,902],{"class":526},[1655,1786,1787,1788,1791,1792,1795,1796,1799],{},"The ",[517,1789,1790],{},"environments.client"," configuration tells Vite which file to use as the browser entry point. Nitro automatically detects the server entry from files named ",[517,1793,1794],{},"entry-server"," or ",[517,1797,1798],{},"server"," in common directories.",[1659,1801,1803],{"id":1802},"_2-create-the-app-component","2. Create the App Component",[1655,1805,1806],{},"Create a shared React component that runs on both server and client:",[510,1808,1809],{"className":905,"code":906,"filename":907,"language":908,"meta":5,"style":5},[517,1810,1811,1823,1827,1837,1861,1867,1871,1889,1925,1929,1933],{"__ignoreMap":5},[520,1812,1813,1815,1817,1819,1821],{"class":522,"line":523},[520,1814,790],{"class":789},[520,1816,917],{"class":526},[520,1818,796],{"class":789},[520,1820,922],{"class":540},[520,1822,802],{"class":526},[520,1824,1825],{"class":522,"line":530},[520,1826,835],{"emptyLinePlaceholder":402},[520,1828,1829,1831,1833,1835],{"class":522,"line":547},[520,1830,840],{"class":789},[520,1832,935],{"class":789},[520,1834,938],{"class":846},[520,1836,941],{"class":526},[520,1838,1839,1841,1843,1845,1847,1849,1851,1853,1855,1857,1859],{"class":522,"line":556},[520,1840,946],{"class":789},[520,1842,949],{"class":526},[520,1844,952],{"class":533},[520,1846,955],{"class":526},[520,1848,958],{"class":533},[520,1850,961],{"class":526},[520,1852,964],{"class":789},[520,1854,967],{"class":846},[520,1856,970],{"class":526},[520,1858,973],{"class":533},[520,1860,976],{"class":526},[520,1862,1863,1865],{"class":522,"line":569},[520,1864,981],{"class":789},[520,1866,984],{"class":526},[520,1868,1869],{"class":522,"line":582},[520,1870,989],{"class":526},[520,1872,1873,1875,1877,1879,1881,1883,1885,1887],{"class":522,"line":593},[520,1874,994],{"class":526},[520,1876,998],{"class":997},[520,1878,1001],{"class":846},[520,1880,964],{"class":789},[520,1882,1006],{"class":540},[520,1884,1009],{"class":526},[520,1886,998],{"class":997},[520,1888,1014],{"class":526},[520,1890,1891,1893,1895,1897,1899,1901,1903,1905,1907,1909,1911,1913,1915,1917,1919,1921,1923],{"class":522,"line":599},[520,1892,994],{"class":526},[520,1894,1021],{"class":997},[520,1896,1024],{"class":846},[520,1898,964],{"class":789},[520,1900,1029],{"class":526},[520,1902,1032],{"class":789},[520,1904,1035],{"class":846},[520,1906,1038],{"class":526},[520,1908,1042],{"class":1041},[520,1910,1045],{"class":526},[520,1912,1032],{"class":789},[520,1914,1050],{"class":526},[520,1916,1053],{"class":789},[520,1918,1056],{"class":533},[520,1920,1059],{"class":526},[520,1922,1021],{"class":997},[520,1924,1014],{"class":526},[520,1926,1927],{"class":522,"line":607},[520,1928,1068],{"class":526},[520,1930,1931],{"class":522,"line":620},[520,1932,1073],{"class":526},[520,1934,1935],{"class":522,"line":633},[520,1936,717],{"class":526},[1659,1938,1940],{"id":1939},"_3-create-the-server-entry","3. Create the Server Entry",[1655,1942,1943,1944,1947],{},"The server entry renders your React app to a streaming HTML response. It uses ",[517,1945,1946],{},"react-dom/server.edge"," for edge-compatible streaming:",[510,1949,1950],{"className":905,"code":1158,"filename":508,"language":908,"meta":5,"style":5},[517,1951,1952,1960,1972,1984,1988,2000,2012,2016,2024,2040,2054,2064,2072,2086,2094,2114,2134,2158,2162,2182,2206,2210,2228,2236,2250,2258,2266,2274,2278,2290,2294,2298],{"__ignoreMap":5},[520,1953,1954,1956,1958],{"class":522,"line":523},[520,1955,790],{"class":789},[520,1957,1167],{"class":540},[520,1959,802],{"class":526},[520,1961,1962,1964,1966,1968,1970],{"class":522,"line":530},[520,1963,790],{"class":789},[520,1965,1176],{"class":526},[520,1967,796],{"class":789},[520,1969,1181],{"class":540},[520,1971,802],{"class":526},[520,1973,1974,1976,1978,1980,1982],{"class":522,"line":547},[520,1975,790],{"class":789},[520,1977,1113],{"class":526},[520,1979,796],{"class":789},[520,1981,1118],{"class":540},[520,1983,802],{"class":526},[520,1985,1986],{"class":522,"line":556},[520,1987,835],{"emptyLinePlaceholder":402},[520,1989,1990,1992,1994,1996,1998],{"class":522,"line":569},[520,1991,790],{"class":789},[520,1993,1206],{"class":526},[520,1995,796],{"class":789},[520,1997,1211],{"class":540},[520,1999,802],{"class":526},[520,2001,2002,2004,2006,2008,2010],{"class":522,"line":582},[520,2003,790],{"class":789},[520,2005,1220],{"class":526},[520,2007,796],{"class":789},[520,2009,1225],{"class":540},[520,2011,802],{"class":526},[520,2013,2014],{"class":522,"line":593},[520,2015,835],{"emptyLinePlaceholder":402},[520,2017,2018,2020,2022],{"class":522,"line":599},[520,2019,840],{"class":789},[520,2021,843],{"class":789},[520,2023,1240],{"class":526},[520,2025,2026,2028,2030,2032,2034,2036,2038],{"class":522,"line":607},[520,2027,1245],{"class":789},[520,2029,1248],{"class":846},[520,2031,970],{"class":526},[520,2033,1253],{"class":1041},[520,2035,1256],{"class":789},[520,2037,1259],{"class":846},[520,2039,1262],{"class":526},[520,2041,2042,2044,2046,2048,2050,2052],{"class":522,"line":620},[520,2043,1267],{"class":789},[520,2045,1270],{"class":533},[520,2047,1273],{"class":789},[520,2049,1276],{"class":526},[520,2051,1279],{"class":846},[520,2053,1282],{"class":526},[520,2055,2056,2058,2060,2062],{"class":522,"line":633},[520,2057,1287],{"class":789},[520,2059,1290],{"class":789},[520,2061,1293],{"class":846},[520,2063,1296],{"class":526},[520,2065,2066,2068,2070],{"class":522,"line":646},[520,2067,1301],{"class":789},[520,2069,1304],{"class":846},[520,2071,1296],{"class":526},[520,2073,2074,2076,2078,2080,2082,2084],{"class":522,"line":659},[520,2075,1311],{"class":526},[520,2077,1314],{"class":997},[520,2079,1317],{"class":846},[520,2081,964],{"class":789},[520,2083,1322],{"class":540},[520,2085,1014],{"class":526},[520,2087,2088,2090,2092],{"class":522,"line":672},[520,2089,1329],{"class":526},[520,2091,1332],{"class":997},[520,2093,1014],{"class":526},[520,2095,2096,2098,2100,2102,2104,2106,2108,2110,2112],{"class":522,"line":684},[520,2097,1339],{"class":526},[520,2099,1342],{"class":997},[520,2101,1345],{"class":846},[520,2103,964],{"class":789},[520,2105,1350],{"class":540},[520,2107,1353],{"class":846},[520,2109,964],{"class":789},[520,2111,1358],{"class":540},[520,2113,1361],{"class":526},[520,2115,2116,2118,2120,2122,2124,2126,2128,2130,2132],{"class":522,"line":697},[520,2117,1366],{"class":526},[520,2119,1369],{"class":846},[520,2121,1038],{"class":526},[520,2123,1374],{"class":1041},[520,2125,1256],{"class":789},[520,2127,1379],{"class":533},[520,2129,1045],{"class":526},[520,2131,1032],{"class":789},[520,2133,984],{"class":526},[520,2135,2136,2138,2140,2142,2144,2146,2148,2150,2152,2154,2156],{"class":522,"line":708},[520,2137,1390],{"class":526},[520,2139,1393],{"class":997},[520,2141,1396],{"class":846},[520,2143,964],{"class":789},[520,2145,1401],{"class":526},[520,2147,1404],{"class":846},[520,2149,964],{"class":789},[520,2151,1409],{"class":540},[520,2153,1412],{"class":526},[520,2155,1415],{"class":789},[520,2157,1418],{"class":526},[520,2159,2160],{"class":522,"line":714},[520,2161,1423],{"class":526},[520,2163,2164,2166,2168,2170,2172,2174,2176,2178,2180],{"class":522,"line":1426},[520,2165,1429],{"class":526},[520,2167,1369],{"class":846},[520,2169,1038],{"class":526},[520,2171,1374],{"class":1041},[520,2173,1256],{"class":789},[520,2175,1379],{"class":533},[520,2177,1045],{"class":526},[520,2179,1032],{"class":789},[520,2181,984],{"class":526},[520,2183,2184,2186,2188,2190,2192,2194,2196,2198,2200,2202,2204],{"class":522,"line":1448},[520,2185,1390],{"class":526},[520,2187,1393],{"class":997},[520,2189,1396],{"class":846},[520,2191,964],{"class":789},[520,2193,1401],{"class":526},[520,2195,1461],{"class":846},[520,2197,964],{"class":789},[520,2199,1466],{"class":540},[520,2201,1412],{"class":526},[520,2203,1415],{"class":789},[520,2205,1418],{"class":526},[520,2207,2208],{"class":522,"line":1475},[520,2209,1423],{"class":526},[520,2211,2212,2214,2216,2218,2220,2222,2224,2226],{"class":522,"line":1480},[520,2213,1339],{"class":526},[520,2215,1485],{"class":997},[520,2217,1488],{"class":846},[520,2219,964],{"class":789},[520,2221,541],{"class":540},[520,2223,1495],{"class":846},[520,2225,964],{"class":789},[520,2227,1500],{"class":526},[520,2229,2230,2232,2234],{"class":522,"line":1503},[520,2231,1506],{"class":526},[520,2233,1332],{"class":997},[520,2235,1014],{"class":526},[520,2237,2238,2240,2242,2244,2246,2248],{"class":522,"line":1513},[520,2239,1329],{"class":526},[520,2241,1518],{"class":997},[520,2243,1521],{"class":846},[520,2245,964],{"class":789},[520,2247,1526],{"class":540},[520,2249,1014],{"class":526},[520,2251,2252,2254,2256],{"class":522,"line":1531},[520,2253,1339],{"class":526},[520,2255,1152],{"class":533},[520,2257,1361],{"class":526},[520,2259,2260,2262,2264],{"class":522,"line":1540},[520,2261,1506],{"class":526},[520,2263,1518],{"class":997},[520,2265,1014],{"class":526},[520,2267,2268,2270,2272],{"class":522,"line":1549},[520,2269,1552],{"class":526},[520,2271,1314],{"class":997},[520,2273,1014],{"class":526},[520,2275,2276],{"class":522,"line":1559},[520,2277,1562],{"class":526},[520,2279,2280,2282,2284,2286,2288],{"class":522,"line":1565},[520,2281,1568],{"class":526},[520,2283,1571],{"class":540},[520,2285,537],{"class":526},[520,2287,1576],{"class":540},[520,2289,1579],{"class":526},[520,2291,2292],{"class":522,"line":1582},[520,2293,1585],{"class":526},[520,2295,2296],{"class":522,"line":1588},[520,2297,596],{"class":526},[520,2299,2300],{"class":522,"line":1593},[520,2301,1596],{"class":526},[1655,2303,2304,2305,2308,2309,2312,2313,2316,2317,2320,2321,2324],{},"Import assets using the ",[517,2306,2307],{},"?assets=client"," and ",[517,2310,2311],{},"?assets=ssr"," query parameters. Nitro collects CSS and JS assets from each entry point, and ",[517,2314,2315],{},"merge()"," combines them into a single manifest. The ",[517,2318,2319],{},"assets"," object provides arrays of stylesheet and script attributes, plus the client entry URL. Use ",[517,2322,2323],{},"renderToReadableStream"," to stream HTML as React renders, improving time-to-first-byte.",[1659,2326,2328],{"id":2327},"_4-create-the-client-entry","4. Create the Client Entry",[1655,2330,2331],{},"The client entry hydrates the server-rendered HTML, attaching React's event handlers:",[510,2333,2334],{"className":905,"code":1080,"filename":1081,"language":908,"meta":5,"style":5},[517,2335,2336,2344,2356,2368,2372],{"__ignoreMap":5},[520,2337,2338,2340,2342],{"class":522,"line":523},[520,2339,790],{"class":789},[520,2341,1090],{"class":540},[520,2343,802],{"class":526},[520,2345,2346,2348,2350,2352,2354],{"class":522,"line":530},[520,2347,790],{"class":789},[520,2349,1099],{"class":526},[520,2351,796],{"class":789},[520,2353,1104],{"class":540},[520,2355,802],{"class":526},[520,2357,2358,2360,2362,2364,2366],{"class":522,"line":547},[520,2359,790],{"class":789},[520,2361,1113],{"class":526},[520,2363,796],{"class":789},[520,2365,1118],{"class":540},[520,2367,802],{"class":526},[520,2369,2370],{"class":522,"line":556},[520,2371,835],{"emptyLinePlaceholder":402},[520,2373,2374,2376,2378,2380,2382,2384,2386,2388,2390,2392],{"class":522,"line":569},[520,2375,1129],{"class":846},[520,2377,1132],{"class":526},[520,2379,1135],{"class":846},[520,2381,970],{"class":526},[520,2383,1140],{"class":540},[520,2385,1143],{"class":526},[520,2387,1146],{"class":789},[520,2389,1149],{"class":526},[520,2391,1152],{"class":533},[520,2393,1155],{"class":526},[1655,2395,1787,2396,2399,2400,2402],{},[517,2397,2398],{},"@vitejs/plugin-react/preamble"," import is required for React Fast Refresh during development. The ",[517,2401,1129],{}," function attaches React to the existing server-rendered DOM without re-rendering it.",[1659,2404,2406],{"id":2405},"learn-more","Learn More",[2408,2409,2410,2416],"ul",{},[2411,2412,2413],"li",{},[2414,2415,18],"a",{"href":19},[2411,2417,2418],{},[2414,2419,68],{"href":69},[2421,2422,2423],"style",{},"html pre.shiki code .slsVL, html code.shiki .slsVL{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8}html pre.shiki code .suiK_, html code.shiki .suiK_{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#79B8FF}html pre.shiki code .sfrk1, html code.shiki .sfrk1{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF}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 .so5gQ, html code.shiki .so5gQ{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#F97583}html pre.shiki code .shcOC, html code.shiki .shcOC{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#B392F0}html pre.shiki code .sByVh, html code.shiki .sByVh{--shiki-light:#22863A;--shiki-default:#85E89D;--shiki-dark:#85E89D}html pre.shiki code .sQHwn, html code.shiki .sQHwn{--shiki-light:#E36209;--shiki-default:#FFAB70;--shiki-dark:#FFAB70}",{"title":5,"searchDepth":530,"depth":530,"links":2425},[2426,2427,2428,2429,2430,2431],{"id":1661,"depth":530,"text":1662},{"id":1682,"depth":530,"text":1683},{"id":1802,"depth":530,"text":1803},{"id":1939,"depth":530,"text":1940},{"id":2327,"depth":530,"text":2328},{"id":2405,"depth":530,"text":2406},"md",{"automd":402,"category":442,"icon":340},{"icon":340},{"title":352,"description":479},"80bdNPjS8Me0yBlKa0tHYLQm0spobz1KEMLOgsoXSow",[2438,2439],{"title":347,"path":348,"stem":349,"description":476,"icon":350,"children":-1},{"title":356,"path":357,"stem":358,"description":482,"icon":359,"children":-1},1776333851570]