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