[{"data":1,"prerenderedAt":2641},["ShallowReactive",2],{"navigation":3,"examples-nav":377,"-examples-vite-ssr-preact":478,"-examples-vite-ssr-preact-surround":2638},[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":337,"body":480,"description":455,"extension":2633,"meta":2634,"navigation":2635,"path":338,"seo":2636,"stem":339,"__hash__":2637},"content/4.examples/vite-ssr-preact.md",{"type":481,"value":482,"toc":2625,"icon":340},"minimark",[483,1752,1755,1760,1777,1781,1788,1898,1913,1917,1920,2016,2020,2026,2488,2511,2515,2518,2594,2604,2608,2621],[484,485,488,684,743,888,1021,1115,1695],"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    \"@preact/preset-vite\": \"^2.10.3\",\n    \"@tailwindcss/vite\": \"^4.1.18\",\n    \"nitro\": \"latest\",\n    \"preact\": \"^10.28.3\",\n    \"preact-render-to-string\": \"^6.6.5\",\n    \"tailwindcss\": \"^4.1.18\",\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,672,678],"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},"    \"@preact/preset-vite\"",[499,591,516],{"class":505},[499,593,594],{"class":519},"\"^2.10.3\"",[499,596,523],{"class":505},[499,598,600,603,605,608],{"class":501,"line":599},10,[499,601,602],{"class":512},"    \"@tailwindcss/vite\"",[499,604,516],{"class":505},[499,606,607],{"class":519},"\"^4.1.18\"",[499,609,523],{"class":505},[499,611,613,616,618,621],{"class":501,"line":612},11,[499,614,615],{"class":512},"    \"nitro\"",[499,617,516],{"class":505},[499,619,620],{"class":519},"\"latest\"",[499,622,523],{"class":505},[499,624,626,629,631,634],{"class":501,"line":625},12,[499,627,628],{"class":512},"    \"preact\"",[499,630,516],{"class":505},[499,632,633],{"class":519},"\"^10.28.3\"",[499,635,523],{"class":505},[499,637,639,642,644,647],{"class":501,"line":638},13,[499,640,641],{"class":512},"    \"preact-render-to-string\"",[499,643,516],{"class":505},[499,645,646],{"class":519},"\"^6.6.5\"",[499,648,523],{"class":505},[499,650,652,655,657,659],{"class":501,"line":651},14,[499,653,654],{"class":512},"    \"tailwindcss\"",[499,656,516],{"class":505},[499,658,607],{"class":519},[499,660,523],{"class":505},[499,662,664,667,669],{"class":501,"line":663},15,[499,665,666],{"class":512},"    \"vite\"",[499,668,516],{"class":505},[499,670,671],{"class":519},"\"beta\"\n",[499,673,675],{"class":501,"line":674},16,[499,676,677],{"class":505},"  }\n",[499,679,681],{"class":501,"line":680},17,[499,682,683],{"class":505},"}\n",[489,685,688],{"className":491,"code":686,"filename":687,"language":494,"meta":5,"style":5},"{\n  \"extends\": \"nitro/tsconfig\",\n  \"compilerOptions\": {\n    \"jsx\": \"react-jsx\",\n    \"jsxImportSource\": \"preact\"\n  }\n}\n","tsconfig.json",[496,689,690,694,706,713,725,735,739],{"__ignoreMap":5},[499,691,692],{"class":501,"line":502},[499,693,506],{"class":505},[499,695,696,699,701,704],{"class":501,"line":509},[499,697,698],{"class":512},"  \"extends\"",[499,700,516],{"class":505},[499,702,703],{"class":519},"\"nitro/tsconfig\"",[499,705,523],{"class":505},[499,707,708,711],{"class":501,"line":526},[499,709,710],{"class":512},"  \"compilerOptions\"",[499,712,532],{"class":505},[499,714,715,718,720,723],{"class":501,"line":535},[499,716,717],{"class":512},"    \"jsx\"",[499,719,516],{"class":505},[499,721,722],{"class":519},"\"react-jsx\"",[499,724,523],{"class":505},[499,726,727,730,732],{"class":501,"line":548},[499,728,729],{"class":512},"    \"jsxImportSource\"",[499,731,516],{"class":505},[499,733,734],{"class":519},"\"preact\"\n",[499,736,737],{"class":501,"line":561},[499,738,677],{"class":505},[499,740,741],{"class":501,"line":572},[499,742,683],{"class":505},[489,744,749],{"className":745,"code":746,"filename":747,"language":748,"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 preact from \"@preact/preset-vite\";\n\nexport default defineConfig({\n  plugins: [nitro(), preact()],\n  environments: {\n    client: {\n      build: {\n        rollupOptions: {\n          input: \"./src/entry-client.tsx\",\n        },\n      },\n    },\n  },\n});\n","vite.config.mjs","js",[496,750,751,769,783,797,802,817,834,839,844,849,854,864,869,874,879,883],{"__ignoreMap":5},[499,752,753,757,760,763,766],{"class":501,"line":502},[499,754,756],{"class":755},"so5gQ","import",[499,758,759],{"class":505}," { defineConfig } ",[499,761,762],{"class":755},"from",[499,764,765],{"class":519}," \"vite\"",[499,767,768],{"class":505},";\n",[499,770,771,773,776,778,781],{"class":501,"line":509},[499,772,756],{"class":755},[499,774,775],{"class":505}," { nitro } ",[499,777,762],{"class":755},[499,779,780],{"class":519}," \"nitro/vite\"",[499,782,768],{"class":505},[499,784,785,787,790,792,795],{"class":501,"line":526},[499,786,756],{"class":755},[499,788,789],{"class":505}," preact ",[499,791,762],{"class":755},[499,793,794],{"class":519}," \"@preact/preset-vite\"",[499,796,768],{"class":505},[499,798,799],{"class":501,"line":535},[499,800,801],{"emptyLinePlaceholder":381},"\n",[499,803,804,807,810,814],{"class":501,"line":548},[499,805,806],{"class":755},"export",[499,808,809],{"class":755}," default",[499,811,813],{"class":812},"shcOC"," defineConfig",[499,815,816],{"class":505},"({\n",[499,818,819,822,825,828,831],{"class":501,"line":561},[499,820,821],{"class":505},"  plugins: [",[499,823,824],{"class":812},"nitro",[499,826,827],{"class":505},"(), ",[499,829,830],{"class":812},"preact",[499,832,833],{"class":505},"()],\n",[499,835,836],{"class":501,"line":572},[499,837,838],{"class":505},"  environments: {\n",[499,840,841],{"class":501,"line":578},[499,842,843],{"class":505},"    client: {\n",[499,845,846],{"class":501,"line":586},[499,847,848],{"class":505},"      build: {\n",[499,850,851],{"class":501,"line":599},[499,852,853],{"class":505},"        rollupOptions: {\n",[499,855,856,859,862],{"class":501,"line":612},[499,857,858],{"class":505},"          input: ",[499,860,861],{"class":519},"\"./src/entry-client.tsx\"",[499,863,523],{"class":505},[499,865,866],{"class":501,"line":625},[499,867,868],{"class":505},"        },\n",[499,870,871],{"class":501,"line":638},[499,872,873],{"class":505},"      },\n",[499,875,876],{"class":501,"line":651},[499,877,878],{"class":505},"    },\n",[499,880,881],{"class":501,"line":663},[499,882,575],{"class":505},[499,884,885],{"class":501,"line":674},[499,886,887],{"class":505},"});\n",[489,889,894],{"className":890,"code":891,"filename":892,"language":893,"meta":5,"style":5},"language-tsx shiki shiki-themes github-light github-dark github-dark","import { useState } from \"preact/hooks\";\n\nexport function App() {\n  const [count, setCount] = useState(0);\n  return \u003Cbutton onClick={() => setCount((c) => c + 1)}>Count is {count}\u003C/button>;\n}\n","src/app.tsx","tsx",[496,895,896,910,914,927,962,1017],{"__ignoreMap":5},[499,897,898,900,903,905,908],{"class":501,"line":502},[499,899,756],{"class":755},[499,901,902],{"class":505}," { useState } ",[499,904,762],{"class":755},[499,906,907],{"class":519}," \"preact/hooks\"",[499,909,768],{"class":505},[499,911,912],{"class":501,"line":509},[499,913,801],{"emptyLinePlaceholder":381},[499,915,916,918,921,924],{"class":501,"line":526},[499,917,806],{"class":755},[499,919,920],{"class":755}," function",[499,922,923],{"class":812}," App",[499,925,926],{"class":505},"() {\n",[499,928,929,932,935,938,941,944,947,950,953,956,959],{"class":501,"line":535},[499,930,931],{"class":755},"  const",[499,933,934],{"class":505}," [",[499,936,937],{"class":512},"count",[499,939,940],{"class":505},", ",[499,942,943],{"class":512},"setCount",[499,945,946],{"class":505},"] ",[499,948,949],{"class":755},"=",[499,951,952],{"class":812}," useState",[499,954,955],{"class":505},"(",[499,957,958],{"class":512},"0",[499,960,961],{"class":505},");\n",[499,963,964,967,970,974,977,979,982,985,988,991,995,998,1000,1003,1006,1009,1012,1014],{"class":501,"line":548},[499,965,966],{"class":755},"  return",[499,968,969],{"class":505}," \u003C",[499,971,973],{"class":972},"sByVh","button",[499,975,976],{"class":812}," onClick",[499,978,949],{"class":755},[499,980,981],{"class":505},"{() ",[499,983,984],{"class":755},"=>",[499,986,987],{"class":812}," setCount",[499,989,990],{"class":505},"((",[499,992,994],{"class":993},"sQHwn","c",[499,996,997],{"class":505},") ",[499,999,984],{"class":755},[499,1001,1002],{"class":505}," c ",[499,1004,1005],{"class":755},"+",[499,1007,1008],{"class":512}," 1",[499,1010,1011],{"class":505},")}>Count is {count}\u003C/",[499,1013,973],{"class":972},[499,1015,1016],{"class":505},">;\n",[499,1018,1019],{"class":501,"line":561},[499,1020,683],{"class":505},[489,1022,1025],{"className":890,"code":1023,"filename":1024,"language":893,"meta":5,"style":5},"import { hydrate } from \"preact\";\nimport { App } from \"./app.tsx\";\n\nfunction main() {\n  hydrate(\u003CApp />, document.querySelector(\"#app\")!);\n}\n\nmain();\n","src/entry-client.tsx",[496,1026,1027,1041,1055,1059,1069,1099,1103,1107],{"__ignoreMap":5},[499,1028,1029,1031,1034,1036,1039],{"class":501,"line":502},[499,1030,756],{"class":755},[499,1032,1033],{"class":505}," { hydrate } ",[499,1035,762],{"class":755},[499,1037,1038],{"class":519}," \"preact\"",[499,1040,768],{"class":505},[499,1042,1043,1045,1048,1050,1053],{"class":501,"line":509},[499,1044,756],{"class":755},[499,1046,1047],{"class":505}," { App } ",[499,1049,762],{"class":755},[499,1051,1052],{"class":519}," \"./app.tsx\"",[499,1054,768],{"class":505},[499,1056,1057],{"class":501,"line":526},[499,1058,801],{"emptyLinePlaceholder":381},[499,1060,1061,1064,1067],{"class":501,"line":535},[499,1062,1063],{"class":755},"function",[499,1065,1066],{"class":812}," main",[499,1068,926],{"class":505},[499,1070,1071,1074,1077,1080,1083,1086,1088,1091,1094,1097],{"class":501,"line":548},[499,1072,1073],{"class":812},"  hydrate",[499,1075,1076],{"class":505},"(\u003C",[499,1078,1079],{"class":512},"App",[499,1081,1082],{"class":505}," />, document.",[499,1084,1085],{"class":812},"querySelector",[499,1087,955],{"class":505},[499,1089,1090],{"class":519},"\"#app\"",[499,1092,1093],{"class":505},")",[499,1095,1096],{"class":755},"!",[499,1098,961],{"class":505},[499,1100,1101],{"class":501,"line":561},[499,1102,683],{"class":505},[499,1104,1105],{"class":501,"line":572},[499,1106,801],{"emptyLinePlaceholder":381},[499,1108,1109,1112],{"class":501,"line":578},[499,1110,1111],{"class":812},"main",[499,1113,1114],{"class":505},"();\n",[489,1116,1118],{"className":890,"code":1117,"filename":487,"language":893,"meta":5,"style":5},"import \"./styles.css\";\nimport { renderToReadableStream } from \"preact-render-to-string/stream\";\nimport { App } from \"./app.jsx\";\n\nimport clientAssets from \"./entry-client?assets=client\";\nimport serverAssets from \"./entry-server?assets=ssr\";\n\nexport default {\n  async fetch(request: Request) {\n    const url = new URL(request.url);\n    const htmlStream = renderToReadableStream(\u003CRoot url={url} />);\n    return new Response(htmlStream, {\n      headers: { \"Content-Type\": \"text/html;charset=utf-8\" },\n    });\n  },\n};\n\nfunction Root(props: { url: URL }) {\n  const assets = clientAssets.merge(serverAssets);\n  return (\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>\n        \u003Ch1 className=\"hero\">Nitro + Vite + Preact\u003C/h1>\n        \u003Cp>URL: {props.url.href}\u003C/p>\n        \u003Cdiv id=\"app\">\n          \u003CApp />\n        \u003C/div>\n      \u003C/body>\n    \u003C/html>\n  );\n}\n",[496,1119,1120,1129,1143,1156,1160,1174,1188,1192,1201,1223,1243,1267,1280,1296,1301,1305,1310,1314,1342,1361,1369,1389,1400,1428,1453,1487,1493,1515,1542,1547,1570,1580,1590,1613,1628,1646,1655,1665,1674,1684,1690],{"__ignoreMap":5},[499,1121,1122,1124,1127],{"class":501,"line":502},[499,1123,756],{"class":755},[499,1125,1126],{"class":519}," \"./styles.css\"",[499,1128,768],{"class":505},[499,1130,1131,1133,1136,1138,1141],{"class":501,"line":509},[499,1132,756],{"class":755},[499,1134,1135],{"class":505}," { renderToReadableStream } ",[499,1137,762],{"class":755},[499,1139,1140],{"class":519}," \"preact-render-to-string/stream\"",[499,1142,768],{"class":505},[499,1144,1145,1147,1149,1151,1154],{"class":501,"line":526},[499,1146,756],{"class":755},[499,1148,1047],{"class":505},[499,1150,762],{"class":755},[499,1152,1153],{"class":519}," \"./app.jsx\"",[499,1155,768],{"class":505},[499,1157,1158],{"class":501,"line":535},[499,1159,801],{"emptyLinePlaceholder":381},[499,1161,1162,1164,1167,1169,1172],{"class":501,"line":548},[499,1163,756],{"class":755},[499,1165,1166],{"class":505}," clientAssets ",[499,1168,762],{"class":755},[499,1170,1171],{"class":519}," \"./entry-client?assets=client\"",[499,1173,768],{"class":505},[499,1175,1176,1178,1181,1183,1186],{"class":501,"line":561},[499,1177,756],{"class":755},[499,1179,1180],{"class":505}," serverAssets ",[499,1182,762],{"class":755},[499,1184,1185],{"class":519}," \"./entry-server?assets=ssr\"",[499,1187,768],{"class":505},[499,1189,1190],{"class":501,"line":572},[499,1191,801],{"emptyLinePlaceholder":381},[499,1193,1194,1196,1198],{"class":501,"line":578},[499,1195,806],{"class":755},[499,1197,809],{"class":755},[499,1199,1200],{"class":505}," {\n",[499,1202,1203,1206,1209,1211,1214,1217,1220],{"class":501,"line":586},[499,1204,1205],{"class":755},"  async",[499,1207,1208],{"class":812}," fetch",[499,1210,955],{"class":505},[499,1212,1213],{"class":993},"request",[499,1215,1216],{"class":755},":",[499,1218,1219],{"class":812}," Request",[499,1221,1222],{"class":505},") {\n",[499,1224,1225,1228,1231,1234,1237,1240],{"class":501,"line":599},[499,1226,1227],{"class":755},"    const",[499,1229,1230],{"class":512}," url",[499,1232,1233],{"class":755}," =",[499,1235,1236],{"class":755}," new",[499,1238,1239],{"class":812}," URL",[499,1241,1242],{"class":505},"(request.url);\n",[499,1244,1245,1247,1250,1252,1255,1257,1260,1262,1264],{"class":501,"line":612},[499,1246,1227],{"class":755},[499,1248,1249],{"class":512}," htmlStream",[499,1251,1233],{"class":755},[499,1253,1254],{"class":812}," renderToReadableStream",[499,1256,1076],{"class":505},[499,1258,1259],{"class":512},"Root",[499,1261,1230],{"class":812},[499,1263,949],{"class":755},[499,1265,1266],{"class":505},"{url} />);\n",[499,1268,1269,1272,1274,1277],{"class":501,"line":625},[499,1270,1271],{"class":755},"    return",[499,1273,1236],{"class":755},[499,1275,1276],{"class":812}," Response",[499,1278,1279],{"class":505},"(htmlStream, {\n",[499,1281,1282,1285,1288,1290,1293],{"class":501,"line":638},[499,1283,1284],{"class":505},"      headers: { ",[499,1286,1287],{"class":519},"\"Content-Type\"",[499,1289,516],{"class":505},[499,1291,1292],{"class":519},"\"text/html;charset=utf-8\"",[499,1294,1295],{"class":505}," },\n",[499,1297,1298],{"class":501,"line":651},[499,1299,1300],{"class":505},"    });\n",[499,1302,1303],{"class":501,"line":663},[499,1304,575],{"class":505},[499,1306,1307],{"class":501,"line":674},[499,1308,1309],{"class":505},"};\n",[499,1311,1312],{"class":501,"line":680},[499,1313,801],{"emptyLinePlaceholder":381},[499,1315,1317,1319,1322,1324,1327,1329,1332,1335,1337,1339],{"class":501,"line":1316},18,[499,1318,1063],{"class":755},[499,1320,1321],{"class":812}," Root",[499,1323,955],{"class":505},[499,1325,1326],{"class":993},"props",[499,1328,1216],{"class":755},[499,1330,1331],{"class":505}," { ",[499,1333,1334],{"class":993},"url",[499,1336,1216],{"class":755},[499,1338,1239],{"class":812},[499,1340,1341],{"class":505}," }) {\n",[499,1343,1345,1347,1350,1352,1355,1358],{"class":501,"line":1344},19,[499,1346,931],{"class":755},[499,1348,1349],{"class":512}," assets",[499,1351,1233],{"class":755},[499,1353,1354],{"class":505}," clientAssets.",[499,1356,1357],{"class":812},"merge",[499,1359,1360],{"class":505},"(serverAssets);\n",[499,1362,1364,1366],{"class":501,"line":1363},20,[499,1365,966],{"class":755},[499,1367,1368],{"class":505}," (\n",[499,1370,1372,1375,1378,1381,1383,1386],{"class":501,"line":1371},21,[499,1373,1374],{"class":505},"    \u003C",[499,1376,1377],{"class":972},"html",[499,1379,1380],{"class":812}," lang",[499,1382,949],{"class":755},[499,1384,1385],{"class":519},"\"en\"",[499,1387,1388],{"class":505},">\n",[499,1390,1392,1395,1398],{"class":501,"line":1391},22,[499,1393,1394],{"class":505},"      \u003C",[499,1396,1397],{"class":972},"head",[499,1399,1388],{"class":505},[499,1401,1403,1406,1409,1412,1414,1417,1420,1422,1425],{"class":501,"line":1402},23,[499,1404,1405],{"class":505},"        \u003C",[499,1407,1408],{"class":972},"meta",[499,1410,1411],{"class":812}," name",[499,1413,949],{"class":755},[499,1415,1416],{"class":519},"\"viewport\"",[499,1418,1419],{"class":812}," content",[499,1421,949],{"class":755},[499,1423,1424],{"class":519},"\"width=device-width, initial-scale=1.0\"",[499,1426,1427],{"class":505}," />\n",[499,1429,1431,1434,1437,1439,1442,1444,1447,1449,1451],{"class":501,"line":1430},24,[499,1432,1433],{"class":505},"        {assets.css.",[499,1435,1436],{"class":812},"map",[499,1438,990],{"class":505},[499,1440,1441],{"class":993},"attr",[499,1443,1216],{"class":755},[499,1445,1446],{"class":512}," any",[499,1448,997],{"class":505},[499,1450,984],{"class":755},[499,1452,1368],{"class":505},[499,1454,1456,1459,1462,1465,1467,1470,1473,1475,1478,1481,1484],{"class":501,"line":1455},25,[499,1457,1458],{"class":505},"          \u003C",[499,1460,1461],{"class":972},"link",[499,1463,1464],{"class":812}," key",[499,1466,949],{"class":755},[499,1468,1469],{"class":505},"{attr.href} ",[499,1471,1472],{"class":812},"rel",[499,1474,949],{"class":755},[499,1476,1477],{"class":519},"\"stylesheet\"",[499,1479,1480],{"class":505}," {",[499,1482,1483],{"class":755},"...",[499,1485,1486],{"class":505},"attr} />\n",[499,1488,1490],{"class":501,"line":1489},26,[499,1491,1492],{"class":505},"        ))}\n",[499,1494,1496,1499,1501,1503,1505,1507,1509,1511,1513],{"class":501,"line":1495},27,[499,1497,1498],{"class":505},"        {assets.js.",[499,1500,1436],{"class":812},[499,1502,990],{"class":505},[499,1504,1441],{"class":993},[499,1506,1216],{"class":755},[499,1508,1446],{"class":512},[499,1510,997],{"class":505},[499,1512,984],{"class":755},[499,1514,1368],{"class":505},[499,1516,1518,1520,1522,1524,1526,1528,1531,1533,1536,1538,1540],{"class":501,"line":1517},28,[499,1519,1458],{"class":505},[499,1521,1461],{"class":972},[499,1523,1464],{"class":812},[499,1525,949],{"class":755},[499,1527,1469],{"class":505},[499,1529,1530],{"class":812},"type",[499,1532,949],{"class":755},[499,1534,1535],{"class":519},"\"modulepreload\"",[499,1537,1480],{"class":505},[499,1539,1483],{"class":755},[499,1541,1486],{"class":505},[499,1543,1545],{"class":501,"line":1544},29,[499,1546,1492],{"class":505},[499,1548,1550,1552,1555,1558,1560,1562,1565,1567],{"class":501,"line":1549},30,[499,1551,1405],{"class":505},[499,1553,1554],{"class":972},"script",[499,1556,1557],{"class":812}," type",[499,1559,949],{"class":755},[499,1561,520],{"class":519},[499,1563,1564],{"class":812}," src",[499,1566,949],{"class":755},[499,1568,1569],{"class":505},"{assets.entry} />\n",[499,1571,1573,1576,1578],{"class":501,"line":1572},31,[499,1574,1575],{"class":505},"      \u003C/",[499,1577,1397],{"class":972},[499,1579,1388],{"class":505},[499,1581,1583,1585,1588],{"class":501,"line":1582},32,[499,1584,1394],{"class":505},[499,1586,1587],{"class":972},"body",[499,1589,1388],{"class":505},[499,1591,1593,1595,1598,1601,1603,1606,1609,1611],{"class":501,"line":1592},33,[499,1594,1405],{"class":505},[499,1596,1597],{"class":972},"h1",[499,1599,1600],{"class":812}," className",[499,1602,949],{"class":755},[499,1604,1605],{"class":519},"\"hero\"",[499,1607,1608],{"class":505},">Nitro + Vite + Preact\u003C/",[499,1610,1597],{"class":972},[499,1612,1388],{"class":505},[499,1614,1616,1618,1621,1624,1626],{"class":501,"line":1615},34,[499,1617,1405],{"class":505},[499,1619,1620],{"class":972},"p",[499,1622,1623],{"class":505},">URL: {props.url.href}\u003C/",[499,1625,1620],{"class":972},[499,1627,1388],{"class":505},[499,1629,1631,1633,1636,1639,1641,1644],{"class":501,"line":1630},35,[499,1632,1405],{"class":505},[499,1634,1635],{"class":972},"div",[499,1637,1638],{"class":812}," id",[499,1640,949],{"class":755},[499,1642,1643],{"class":519},"\"app\"",[499,1645,1388],{"class":505},[499,1647,1649,1651,1653],{"class":501,"line":1648},36,[499,1650,1458],{"class":505},[499,1652,1079],{"class":512},[499,1654,1427],{"class":505},[499,1656,1658,1661,1663],{"class":501,"line":1657},37,[499,1659,1660],{"class":505},"        \u003C/",[499,1662,1635],{"class":972},[499,1664,1388],{"class":505},[499,1666,1668,1670,1672],{"class":501,"line":1667},38,[499,1669,1575],{"class":505},[499,1671,1587],{"class":972},[499,1673,1388],{"class":505},[499,1675,1677,1680,1682],{"class":501,"line":1676},39,[499,1678,1679],{"class":505},"    \u003C/",[499,1681,1377],{"class":972},[499,1683,1388],{"class":505},[499,1685,1687],{"class":501,"line":1686},40,[499,1688,1689],{"class":505},"  );\n",[499,1691,1693],{"class":501,"line":1692},41,[499,1694,683],{"class":505},[489,1696,1701],{"className":1697,"code":1698,"filename":1699,"language":1700,"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,1702,1703,1710,1722,1726,1730,1736,1748],{"__ignoreMap":5},[499,1704,1705,1708],{"class":501,"line":502},[499,1706,1707],{"class":812},".hero",[499,1709,1200],{"class":505},[499,1711,1712,1715,1717,1720],{"class":501,"line":509},[499,1713,1714],{"class":512},"  color",[499,1716,516],{"class":505},[499,1718,1719],{"class":512},"orange",[499,1721,768],{"class":505},[499,1723,1724],{"class":501,"line":526},[499,1725,683],{"class":505},[499,1727,1728],{"class":501,"line":535},[499,1729,801],{"emptyLinePlaceholder":381},[499,1731,1732,1734],{"class":501,"line":548},[499,1733,973],{"class":972},[499,1735,1200],{"class":505},[499,1737,1738,1741,1743,1746],{"class":501,"line":561},[499,1739,1740],{"class":512},"  background-color",[499,1742,516],{"class":505},[499,1744,1745],{"class":512},"lightskyblue",[499,1747,768],{"class":505},[499,1749,1750],{"class":501,"line":572},[499,1751,683],{"class":505},[1620,1753,1754],{},"Set up server-side rendering (SSR) with Preact, Vite, and Nitro. This setup enables streaming HTML responses, automatic asset management, and client hydration.",[1756,1757,1759],"h2",{"id":1758},"overview","Overview",[1761,1762,1764,1768,1771,1774],"steps",{"level":1763},"4",[1765,1766,1767],"h4",{},"Add the Nitro Vite plugin to your Vite config",[1765,1769,1770],{},"Configure client and server entry points",[1765,1772,1773],{},"Create a server entry that renders your app to HTML",[1765,1775,1776],{},"Create a client entry that hydrates the server-rendered HTML",[1756,1778,1780],{"id":1779},"_1-configure-vite","1. Configure Vite",[1620,1782,1783,1784,1787],{},"Add the Nitro and Preact plugins to your Vite config. Define the ",[496,1785,1786],{},"client"," environment with your client entry point:",[489,1789,1790],{"className":745,"code":746,"filename":747,"language":748,"meta":5,"style":5},[496,1791,1792,1804,1816,1828,1832,1842,1854,1858,1862,1866,1870,1878,1882,1886,1890,1894],{"__ignoreMap":5},[499,1793,1794,1796,1798,1800,1802],{"class":501,"line":502},[499,1795,756],{"class":755},[499,1797,759],{"class":505},[499,1799,762],{"class":755},[499,1801,765],{"class":519},[499,1803,768],{"class":505},[499,1805,1806,1808,1810,1812,1814],{"class":501,"line":509},[499,1807,756],{"class":755},[499,1809,775],{"class":505},[499,1811,762],{"class":755},[499,1813,780],{"class":519},[499,1815,768],{"class":505},[499,1817,1818,1820,1822,1824,1826],{"class":501,"line":526},[499,1819,756],{"class":755},[499,1821,789],{"class":505},[499,1823,762],{"class":755},[499,1825,794],{"class":519},[499,1827,768],{"class":505},[499,1829,1830],{"class":501,"line":535},[499,1831,801],{"emptyLinePlaceholder":381},[499,1833,1834,1836,1838,1840],{"class":501,"line":548},[499,1835,806],{"class":755},[499,1837,809],{"class":755},[499,1839,813],{"class":812},[499,1841,816],{"class":505},[499,1843,1844,1846,1848,1850,1852],{"class":501,"line":561},[499,1845,821],{"class":505},[499,1847,824],{"class":812},[499,1849,827],{"class":505},[499,1851,830],{"class":812},[499,1853,833],{"class":505},[499,1855,1856],{"class":501,"line":572},[499,1857,838],{"class":505},[499,1859,1860],{"class":501,"line":578},[499,1861,843],{"class":505},[499,1863,1864],{"class":501,"line":586},[499,1865,848],{"class":505},[499,1867,1868],{"class":501,"line":599},[499,1869,853],{"class":505},[499,1871,1872,1874,1876],{"class":501,"line":612},[499,1873,858],{"class":505},[499,1875,861],{"class":519},[499,1877,523],{"class":505},[499,1879,1880],{"class":501,"line":625},[499,1881,868],{"class":505},[499,1883,1884],{"class":501,"line":638},[499,1885,873],{"class":505},[499,1887,1888],{"class":501,"line":651},[499,1889,878],{"class":505},[499,1891,1892],{"class":501,"line":663},[499,1893,575],{"class":505},[499,1895,1896],{"class":501,"line":674},[499,1897,887],{"class":505},[1620,1899,1900,1901,1904,1905,1908,1909,1912],{},"The ",[496,1902,1903],{},"environments.client"," configuration tells Vite which file to use as the browser entry point. Nitro automatically detects the server entry from files named ",[496,1906,1907],{},"entry-server"," or ",[496,1910,1911],{},"server"," in common directories.",[1756,1914,1916],{"id":1915},"_2-create-the-app-component","2. Create the App Component",[1620,1918,1919],{},"Create a shared Preact component that runs on both server and client:",[489,1921,1922],{"className":890,"code":891,"filename":892,"language":893,"meta":5,"style":5},[496,1923,1924,1936,1940,1950,1974,2012],{"__ignoreMap":5},[499,1925,1926,1928,1930,1932,1934],{"class":501,"line":502},[499,1927,756],{"class":755},[499,1929,902],{"class":505},[499,1931,762],{"class":755},[499,1933,907],{"class":519},[499,1935,768],{"class":505},[499,1937,1938],{"class":501,"line":509},[499,1939,801],{"emptyLinePlaceholder":381},[499,1941,1942,1944,1946,1948],{"class":501,"line":526},[499,1943,806],{"class":755},[499,1945,920],{"class":755},[499,1947,923],{"class":812},[499,1949,926],{"class":505},[499,1951,1952,1954,1956,1958,1960,1962,1964,1966,1968,1970,1972],{"class":501,"line":535},[499,1953,931],{"class":755},[499,1955,934],{"class":505},[499,1957,937],{"class":512},[499,1959,940],{"class":505},[499,1961,943],{"class":512},[499,1963,946],{"class":505},[499,1965,949],{"class":755},[499,1967,952],{"class":812},[499,1969,955],{"class":505},[499,1971,958],{"class":512},[499,1973,961],{"class":505},[499,1975,1976,1978,1980,1982,1984,1986,1988,1990,1992,1994,1996,1998,2000,2002,2004,2006,2008,2010],{"class":501,"line":548},[499,1977,966],{"class":755},[499,1979,969],{"class":505},[499,1981,973],{"class":972},[499,1983,976],{"class":812},[499,1985,949],{"class":755},[499,1987,981],{"class":505},[499,1989,984],{"class":755},[499,1991,987],{"class":812},[499,1993,990],{"class":505},[499,1995,994],{"class":993},[499,1997,997],{"class":505},[499,1999,984],{"class":755},[499,2001,1002],{"class":505},[499,2003,1005],{"class":755},[499,2005,1008],{"class":512},[499,2007,1011],{"class":505},[499,2009,973],{"class":972},[499,2011,1016],{"class":505},[499,2013,2014],{"class":501,"line":561},[499,2015,683],{"class":505},[1756,2017,2019],{"id":2018},"_3-create-the-server-entry","3. Create the Server Entry",[1620,2021,2022,2023,1216],{},"The server entry renders your Preact app to a streaming HTML response using ",[496,2024,2025],{},"preact-render-to-string/stream",[489,2027,2028],{"className":890,"code":1117,"filename":487,"language":893,"meta":5,"style":5},[496,2029,2030,2038,2050,2062,2066,2078,2090,2094,2102,2118,2132,2152,2162,2174,2178,2182,2186,2190,2212,2226,2232,2246,2254,2274,2294,2318,2322,2342,2366,2370,2388,2396,2404,2422,2434,2448,2456,2464,2472,2480,2484],{"__ignoreMap":5},[499,2031,2032,2034,2036],{"class":501,"line":502},[499,2033,756],{"class":755},[499,2035,1126],{"class":519},[499,2037,768],{"class":505},[499,2039,2040,2042,2044,2046,2048],{"class":501,"line":509},[499,2041,756],{"class":755},[499,2043,1135],{"class":505},[499,2045,762],{"class":755},[499,2047,1140],{"class":519},[499,2049,768],{"class":505},[499,2051,2052,2054,2056,2058,2060],{"class":501,"line":526},[499,2053,756],{"class":755},[499,2055,1047],{"class":505},[499,2057,762],{"class":755},[499,2059,1153],{"class":519},[499,2061,768],{"class":505},[499,2063,2064],{"class":501,"line":535},[499,2065,801],{"emptyLinePlaceholder":381},[499,2067,2068,2070,2072,2074,2076],{"class":501,"line":548},[499,2069,756],{"class":755},[499,2071,1166],{"class":505},[499,2073,762],{"class":755},[499,2075,1171],{"class":519},[499,2077,768],{"class":505},[499,2079,2080,2082,2084,2086,2088],{"class":501,"line":561},[499,2081,756],{"class":755},[499,2083,1180],{"class":505},[499,2085,762],{"class":755},[499,2087,1185],{"class":519},[499,2089,768],{"class":505},[499,2091,2092],{"class":501,"line":572},[499,2093,801],{"emptyLinePlaceholder":381},[499,2095,2096,2098,2100],{"class":501,"line":578},[499,2097,806],{"class":755},[499,2099,809],{"class":755},[499,2101,1200],{"class":505},[499,2103,2104,2106,2108,2110,2112,2114,2116],{"class":501,"line":586},[499,2105,1205],{"class":755},[499,2107,1208],{"class":812},[499,2109,955],{"class":505},[499,2111,1213],{"class":993},[499,2113,1216],{"class":755},[499,2115,1219],{"class":812},[499,2117,1222],{"class":505},[499,2119,2120,2122,2124,2126,2128,2130],{"class":501,"line":599},[499,2121,1227],{"class":755},[499,2123,1230],{"class":512},[499,2125,1233],{"class":755},[499,2127,1236],{"class":755},[499,2129,1239],{"class":812},[499,2131,1242],{"class":505},[499,2133,2134,2136,2138,2140,2142,2144,2146,2148,2150],{"class":501,"line":612},[499,2135,1227],{"class":755},[499,2137,1249],{"class":512},[499,2139,1233],{"class":755},[499,2141,1254],{"class":812},[499,2143,1076],{"class":505},[499,2145,1259],{"class":512},[499,2147,1230],{"class":812},[499,2149,949],{"class":755},[499,2151,1266],{"class":505},[499,2153,2154,2156,2158,2160],{"class":501,"line":625},[499,2155,1271],{"class":755},[499,2157,1236],{"class":755},[499,2159,1276],{"class":812},[499,2161,1279],{"class":505},[499,2163,2164,2166,2168,2170,2172],{"class":501,"line":638},[499,2165,1284],{"class":505},[499,2167,1287],{"class":519},[499,2169,516],{"class":505},[499,2171,1292],{"class":519},[499,2173,1295],{"class":505},[499,2175,2176],{"class":501,"line":651},[499,2177,1300],{"class":505},[499,2179,2180],{"class":501,"line":663},[499,2181,575],{"class":505},[499,2183,2184],{"class":501,"line":674},[499,2185,1309],{"class":505},[499,2187,2188],{"class":501,"line":680},[499,2189,801],{"emptyLinePlaceholder":381},[499,2191,2192,2194,2196,2198,2200,2202,2204,2206,2208,2210],{"class":501,"line":1316},[499,2193,1063],{"class":755},[499,2195,1321],{"class":812},[499,2197,955],{"class":505},[499,2199,1326],{"class":993},[499,2201,1216],{"class":755},[499,2203,1331],{"class":505},[499,2205,1334],{"class":993},[499,2207,1216],{"class":755},[499,2209,1239],{"class":812},[499,2211,1341],{"class":505},[499,2213,2214,2216,2218,2220,2222,2224],{"class":501,"line":1344},[499,2215,931],{"class":755},[499,2217,1349],{"class":512},[499,2219,1233],{"class":755},[499,2221,1354],{"class":505},[499,2223,1357],{"class":812},[499,2225,1360],{"class":505},[499,2227,2228,2230],{"class":501,"line":1363},[499,2229,966],{"class":755},[499,2231,1368],{"class":505},[499,2233,2234,2236,2238,2240,2242,2244],{"class":501,"line":1371},[499,2235,1374],{"class":505},[499,2237,1377],{"class":972},[499,2239,1380],{"class":812},[499,2241,949],{"class":755},[499,2243,1385],{"class":519},[499,2245,1388],{"class":505},[499,2247,2248,2250,2252],{"class":501,"line":1391},[499,2249,1394],{"class":505},[499,2251,1397],{"class":972},[499,2253,1388],{"class":505},[499,2255,2256,2258,2260,2262,2264,2266,2268,2270,2272],{"class":501,"line":1402},[499,2257,1405],{"class":505},[499,2259,1408],{"class":972},[499,2261,1411],{"class":812},[499,2263,949],{"class":755},[499,2265,1416],{"class":519},[499,2267,1419],{"class":812},[499,2269,949],{"class":755},[499,2271,1424],{"class":519},[499,2273,1427],{"class":505},[499,2275,2276,2278,2280,2282,2284,2286,2288,2290,2292],{"class":501,"line":1430},[499,2277,1433],{"class":505},[499,2279,1436],{"class":812},[499,2281,990],{"class":505},[499,2283,1441],{"class":993},[499,2285,1216],{"class":755},[499,2287,1446],{"class":512},[499,2289,997],{"class":505},[499,2291,984],{"class":755},[499,2293,1368],{"class":505},[499,2295,2296,2298,2300,2302,2304,2306,2308,2310,2312,2314,2316],{"class":501,"line":1455},[499,2297,1458],{"class":505},[499,2299,1461],{"class":972},[499,2301,1464],{"class":812},[499,2303,949],{"class":755},[499,2305,1469],{"class":505},[499,2307,1472],{"class":812},[499,2309,949],{"class":755},[499,2311,1477],{"class":519},[499,2313,1480],{"class":505},[499,2315,1483],{"class":755},[499,2317,1486],{"class":505},[499,2319,2320],{"class":501,"line":1489},[499,2321,1492],{"class":505},[499,2323,2324,2326,2328,2330,2332,2334,2336,2338,2340],{"class":501,"line":1495},[499,2325,1498],{"class":505},[499,2327,1436],{"class":812},[499,2329,990],{"class":505},[499,2331,1441],{"class":993},[499,2333,1216],{"class":755},[499,2335,1446],{"class":512},[499,2337,997],{"class":505},[499,2339,984],{"class":755},[499,2341,1368],{"class":505},[499,2343,2344,2346,2348,2350,2352,2354,2356,2358,2360,2362,2364],{"class":501,"line":1517},[499,2345,1458],{"class":505},[499,2347,1461],{"class":972},[499,2349,1464],{"class":812},[499,2351,949],{"class":755},[499,2353,1469],{"class":505},[499,2355,1530],{"class":812},[499,2357,949],{"class":755},[499,2359,1535],{"class":519},[499,2361,1480],{"class":505},[499,2363,1483],{"class":755},[499,2365,1486],{"class":505},[499,2367,2368],{"class":501,"line":1544},[499,2369,1492],{"class":505},[499,2371,2372,2374,2376,2378,2380,2382,2384,2386],{"class":501,"line":1549},[499,2373,1405],{"class":505},[499,2375,1554],{"class":972},[499,2377,1557],{"class":812},[499,2379,949],{"class":755},[499,2381,520],{"class":519},[499,2383,1564],{"class":812},[499,2385,949],{"class":755},[499,2387,1569],{"class":505},[499,2389,2390,2392,2394],{"class":501,"line":1572},[499,2391,1575],{"class":505},[499,2393,1397],{"class":972},[499,2395,1388],{"class":505},[499,2397,2398,2400,2402],{"class":501,"line":1582},[499,2399,1394],{"class":505},[499,2401,1587],{"class":972},[499,2403,1388],{"class":505},[499,2405,2406,2408,2410,2412,2414,2416,2418,2420],{"class":501,"line":1592},[499,2407,1405],{"class":505},[499,2409,1597],{"class":972},[499,2411,1600],{"class":812},[499,2413,949],{"class":755},[499,2415,1605],{"class":519},[499,2417,1608],{"class":505},[499,2419,1597],{"class":972},[499,2421,1388],{"class":505},[499,2423,2424,2426,2428,2430,2432],{"class":501,"line":1615},[499,2425,1405],{"class":505},[499,2427,1620],{"class":972},[499,2429,1623],{"class":505},[499,2431,1620],{"class":972},[499,2433,1388],{"class":505},[499,2435,2436,2438,2440,2442,2444,2446],{"class":501,"line":1630},[499,2437,1405],{"class":505},[499,2439,1635],{"class":972},[499,2441,1638],{"class":812},[499,2443,949],{"class":755},[499,2445,1643],{"class":519},[499,2447,1388],{"class":505},[499,2449,2450,2452,2454],{"class":501,"line":1648},[499,2451,1458],{"class":505},[499,2453,1079],{"class":512},[499,2455,1427],{"class":505},[499,2457,2458,2460,2462],{"class":501,"line":1657},[499,2459,1660],{"class":505},[499,2461,1635],{"class":972},[499,2463,1388],{"class":505},[499,2465,2466,2468,2470],{"class":501,"line":1667},[499,2467,1575],{"class":505},[499,2469,1587],{"class":972},[499,2471,1388],{"class":505},[499,2473,2474,2476,2478],{"class":501,"line":1676},[499,2475,1679],{"class":505},[499,2477,1377],{"class":972},[499,2479,1388],{"class":505},[499,2481,2482],{"class":501,"line":1686},[499,2483,1689],{"class":505},[499,2485,2486],{"class":501,"line":1692},[499,2487,683],{"class":505},[1620,2489,2490,2491,2494,2495,2498,2499,2502,2503,2506,2507,2510],{},"Import assets using the ",[496,2492,2493],{},"?assets=client"," and ",[496,2496,2497],{},"?assets=ssr"," query parameters. Nitro collects CSS and JS assets from each entry point, and ",[496,2500,2501],{},"merge()"," combines them into a single manifest. The ",[496,2504,2505],{},"assets"," object provides arrays of stylesheet and script attributes, plus the client entry URL. Use ",[496,2508,2509],{},"renderToReadableStream"," to stream HTML as Preact renders, improving time-to-first-byte.",[1756,2512,2514],{"id":2513},"_4-create-the-client-entry","4. Create the Client Entry",[1620,2516,2517],{},"The client entry hydrates the server-rendered HTML, attaching Preact's event handlers:",[489,2519,2520],{"className":890,"code":1023,"filename":1024,"language":893,"meta":5,"style":5},[496,2521,2522,2534,2546,2550,2558,2580,2584,2588],{"__ignoreMap":5},[499,2523,2524,2526,2528,2530,2532],{"class":501,"line":502},[499,2525,756],{"class":755},[499,2527,1033],{"class":505},[499,2529,762],{"class":755},[499,2531,1038],{"class":519},[499,2533,768],{"class":505},[499,2535,2536,2538,2540,2542,2544],{"class":501,"line":509},[499,2537,756],{"class":755},[499,2539,1047],{"class":505},[499,2541,762],{"class":755},[499,2543,1052],{"class":519},[499,2545,768],{"class":505},[499,2547,2548],{"class":501,"line":526},[499,2549,801],{"emptyLinePlaceholder":381},[499,2551,2552,2554,2556],{"class":501,"line":535},[499,2553,1063],{"class":755},[499,2555,1066],{"class":812},[499,2557,926],{"class":505},[499,2559,2560,2562,2564,2566,2568,2570,2572,2574,2576,2578],{"class":501,"line":548},[499,2561,1073],{"class":812},[499,2563,1076],{"class":505},[499,2565,1079],{"class":512},[499,2567,1082],{"class":505},[499,2569,1085],{"class":812},[499,2571,955],{"class":505},[499,2573,1090],{"class":519},[499,2575,1093],{"class":505},[499,2577,1096],{"class":755},[499,2579,961],{"class":505},[499,2581,2582],{"class":501,"line":561},[499,2583,683],{"class":505},[499,2585,2586],{"class":501,"line":572},[499,2587,801],{"emptyLinePlaceholder":381},[499,2589,2590,2592],{"class":501,"line":578},[499,2591,1111],{"class":812},[499,2593,1114],{"class":505},[1620,2595,1900,2596,2599,2600,2603],{},[496,2597,2598],{},"hydrate"," function attaches Preact to the existing server-rendered DOM inside ",[496,2601,2602],{},"#app"," without re-rendering it.",[1756,2605,2607],{"id":2606},"learn-more","Learn More",[2609,2610,2611,2617],"ul",{},[2612,2613,2614],"li",{},[2615,2616,18],"a",{"href":19},[2612,2618,2619],{},[2615,2620,58],{"href":59},[2622,2623,2624],"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":2626},[2627,2628,2629,2630,2631,2632],{"id":1758,"depth":509,"text":1759},{"id":1779,"depth":509,"text":1780},{"id":1915,"depth":509,"text":1916},{"id":2018,"depth":509,"text":2019},{"id":2513,"depth":509,"text":2514},{"id":2606,"depth":509,"text":2607},"md",{"automd":381,"category":421,"icon":340},{"icon":340},{"title":337,"description":455},"s21hC5jkk53HcvShcjFvQy4seDRxu_TqTv6BZajxiJ0",[2639,2640],{"title":332,"path":333,"stem":334,"description":452,"icon":335,"children":-1},{"title":342,"path":343,"stem":344,"description":458,"icon":330,"children":-1},1773242041988]