[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-tanstack-execution-model":3,"mdc--1ur2km-key":44,"related-repo-tanstack-execution-model":4966,"related-org-tanstack-execution-model":5070},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":17,"repoUrl":18,"updatedAt":19,"license":20,"forks":21,"topics":22,"repo":39,"sourceUrl":42,"mdContent":43},"execution-model","manage isomorphic execution models","Isomorphic-by-default principle, environment boundary functions (createServerFn, createServerOnlyFn, createClientOnlyFn, createIsomorphicFn), ClientOnly component, useHydrated hook, import protection, dead code elimination, environment variable safety (VITE_ prefix, process.env).",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},"tanstack","TanStack","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Ftanstack.png",[12,16],{"name":13,"slug":14,"type":15},"Architecture","architecture","tag",{"name":9,"slug":8,"type":15},14787,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Frouter","2026-07-30T05:27:04.558441",null,1761,[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],"framework","fullstack","javascript","react","route","router","routing","rpc","search","searchparams","server-functions","ssr","state-management","typesafe","typescript","url",{"repoUrl":18,"stars":17,"forks":21,"topics":40,"description":41},[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],"🤖 A client-first, server-capable, fully type-safe router and full-stack framework for the web (React and more).","https:\u002F\u002Fgithub.com\u002FTanStack\u002Frouter\u002Ftree\u002FHEAD\u002Fpackages\u002Fstart-client-core\u002Fskills\u002Fstart-core\u002Fexecution-model","---\nname: execution-model\ndescription: >-\n  Isomorphic-by-default principle, environment boundary functions\n  (createServerFn, createServerOnlyFn, createClientOnlyFn,\n  createIsomorphicFn), ClientOnly component, useHydrated hook,\n  import protection, dead code elimination, environment variable\n  safety (VITE_ prefix, process.env).\nmetadata:\n  type: sub-skill\n  library: tanstack-start\n  library_version: '1.170.14'\nrequires:\n  - start-core\nsources:\n  - TanStack\u002Frouter:docs\u002Fstart\u002Fframework\u002Freact\u002Fguide\u002Fexecution-model.md\n  - TanStack\u002Frouter:docs\u002Fstart\u002Fframework\u002Freact\u002Fguide\u002Fenvironment-variables.md\n  - TanStack\u002Frouter:docs\u002Fstart\u002Fframework\u002Freact\u002Fguide\u002Fimport-protection.md\n---\n\n# Execution Model\n\nUnderstanding where code runs is fundamental to TanStack Start. This skill covers the isomorphic execution model and how to control environment boundaries.\n\n> **CRITICAL**: ALL code in TanStack Start is isomorphic by default — it runs in BOTH server and client bundles. Route loaders run on BOTH server (during SSR) AND client (during navigation). Server-only operations MUST use `createServerFn`.\n> **CRITICAL**: Module-level `process.env` access is wrong on **two** axes — security (values leak into the client bundle) AND runtime correctness (on Cloudflare Workers and other edge runtimes, env is injected per-request, so module-level reads evaluate to `undefined` even on the server). Read env inside `.handler()` or another per-request function, never at module scope.\n> **CRITICAL**: `VITE_` prefixed environment variables are exposed to the client bundle. Server secrets must NOT have the `VITE_` prefix.\n> **CRITICAL**: Relative URLs belong to browser-only code. An isomorphic loader also runs during SSR, where `fetch('\u002Fapi\u002F...')` may have no base URL. Call a server function from the loader, or keep the fetch inside an explicit environment boundary.\n\n## Execution Control APIs\n\n| API                                         | Use Case                    | Client Behavior           | Server Behavior       |\n| ------------------------------------------- | --------------------------- | ------------------------- | --------------------- |\n| `createServerFn()`                          | RPC calls, data mutations   | Network request to server | Direct execution      |\n| `createServerOnlyFn(fn)`                    | Utility functions           | Throws error              | Direct execution      |\n| `createClientOnlyFn(fn)`                    | Browser utilities           | Direct execution          | Throws error          |\n| `createIsomorphicFn()`                      | Different impl per env      | Uses `.client()` impl     | Uses `.server()` impl |\n| `\u003CClientOnly>`                              | Browser-only components     | Renders children          | Renders fallback      |\n| `useHydrated()`                             | Hydration-dependent logic   | `true` after hydration    | `false`               |\n| `import '@tanstack\u002F\u003Cfw>-start\u002Fserver-only'` | Mark whole file server-only | Import denied             | Allowed               |\n| `import '@tanstack\u002F\u003Cfw>-start\u002Fclient-only'` | Mark whole file client-only | Allowed                   | Import denied         |\n\n## Server-Only Execution\n\n### createServerFn (RPC pattern)\n\nThe primary way to run server-only code. On the client, calls become fetch requests:\n\n```tsx\n\u002F\u002F Use @tanstack\u002F\u003Cframework>-start for your framework (react, solid, vue)\nimport { createServerFn } from '@tanstack\u002Freact-start'\n\nconst fetchUser = createServerFn().handler(async () => {\n  const secret = process.env.API_SECRET \u002F\u002F safe — server only\n  return await db.users.find()\n})\n\n\u002F\u002F Client calls this via network request\nconst user = await fetchUser()\n```\n\n### createServerOnlyFn (throws on client)\n\nFor utility functions that must never run on client:\n\n```tsx\n\u002F\u002F Use @tanstack\u002F\u003Cframework>-start for your framework (react, solid, vue)\nimport { createServerOnlyFn } from '@tanstack\u002Freact-start'\n\nconst getSecret = createServerOnlyFn(() => process.env.DATABASE_URL)\n\n\u002F\u002F Server: returns the value\n\u002F\u002F Client: THROWS an error\n```\n\n## Client-Only Execution\n\n### createClientOnlyFn\n\n```tsx\n\u002F\u002F Use @tanstack\u002F\u003Cframework>-start for your framework (react, solid, vue)\nimport { createClientOnlyFn } from '@tanstack\u002Freact-start'\n\nconst saveToStorage = createClientOnlyFn((key: string, value: string) => {\n  localStorage.setItem(key, value)\n})\n```\n\n### ClientOnly Component\n\n```tsx\n\u002F\u002F Use @tanstack\u002F\u003Cframework>-router for your framework (react, solid, vue)\nimport { ClientOnly } from '@tanstack\u002Freact-router'\n\nfunction Analytics() {\n  return (\n    \u003CClientOnly fallback={null}>\n      \u003CGoogleAnalyticsScript \u002F>\n    \u003C\u002FClientOnly>\n  )\n}\n```\n\n### useHydrated Hook\n\n```tsx\n\u002F\u002F Use @tanstack\u002F\u003Cframework>-router for your framework (react, solid, vue)\nimport { useHydrated } from '@tanstack\u002Freact-router'\n\nfunction TimeZoneDisplay() {\n  const hydrated = useHydrated()\n  const timeZone = hydrated\n    ? Intl.DateTimeFormat().resolvedOptions().timeZone\n    : 'UTC'\n\n  return \u003Cdiv>Your timezone: {timeZone}\u003C\u002Fdiv>\n}\n```\n\nBehavior: SSR → `false`, first client render → `false`, after hydration → `true` (stays `true`).\n\n## Environment-Specific Implementations\n\n```tsx\n\u002F\u002F Use @tanstack\u002F\u003Cframework>-start for your framework (react, solid, vue)\nimport { createIsomorphicFn } from '@tanstack\u002Freact-start'\n\nconst getDeviceInfo = createIsomorphicFn()\n  .server(() => ({ type: 'server', platform: process.platform }))\n  .client(() => ({ type: 'client', userAgent: navigator.userAgent }))\n```\n\n## Import Protection: File Markers\n\n> Experimental.\n\nThe `.server.*` and `.client.*` filename suffixes (e.g. `db.server.ts`) opt a file into Start's import protection — it can't be imported from the wrong environment. When you can't or don't want to rename the file, add a side-effect import at the top of the file to apply the same protection by marker:\n\n```ts\n\u002F\u002F src\u002Flib\u002Fsecrets.ts (filename can't be *.server.ts)\nimport '@tanstack\u002Freact-start\u002Fserver-only'\n\u002F\u002F (or @tanstack\u002Fsolid-start\u002Fserver-only, @tanstack\u002Fvue-start\u002Fserver-only)\n\nexport function getApiKey() {\n  return process.env.API_KEY\n}\n```\n\n```ts\n\u002F\u002F src\u002Flib\u002Fstorage.ts\nimport '@tanstack\u002Freact-start\u002Fclient-only'\n\u002F\u002F (or @tanstack\u002Fsolid-start\u002Fclient-only, @tanstack\u002Fvue-start\u002Fclient-only)\n\nexport function savePreferences(prefs: Record\u003Cstring, string>) {\n  localStorage.setItem('prefs', JSON.stringify(prefs))\n}\n```\n\nRules:\n\n- Both markers in the same file is an error.\n- Type-only imports are ignored (they erase to nothing at runtime).\n- Default behavior is `error` in production builds and `mock` in dev. The mock returns a recursive Proxy so dev keeps running while you fix the import graph.\n\nPick the right tool:\n\n- File should never run on the wrong side **and** has no client API → `*.server.ts` filename or `import '@tanstack\u002F\u003Cfw>-start\u002Fserver-only'`.\n- One symbol needs to behave differently per environment → `createIsomorphicFn().client(...).server(...)`.\n- One function should error if called from the wrong side → `createServerOnlyFn` \u002F `createClientOnlyFn`.\n- Component renders only after hydration → `\u003CClientOnly>` or `useHydrated()`.\n\n## Environment Variables\n\n### Server-Side (inside createServerFn)\n\nAccess any variable via `process.env`:\n\n```tsx\nconst connectDb = createServerFn().handler(async () => {\n  const url = process.env.DATABASE_URL \u002F\u002F no prefix needed\n  return createConnection(url)\n})\n```\n\n### Client-Side (components)\n\nOnly `VITE_` prefixed variables are available:\n\n```tsx\n\u002F\u002F Framework-specific component type (React.ReactNode, JSX.Element, etc.)\nfunction ApiProvider({ children }: { children: React.ReactNode }) {\n  const apiUrl = import.meta.env.VITE_API_URL \u002F\u002F available\n  \u002F\u002F import.meta.env.DATABASE_URL → undefined (security)\n  return (\n    \u003CApiContext.Provider value={{ apiUrl }}>{children}\u003C\u002FApiContext.Provider>\n  )\n}\n```\n\n### Runtime Client Variables\n\nIf you need server-side variables on the client without `VITE_` prefix, pass them through a server function:\n\n```tsx\nconst getRuntimeVar = createServerFn({ method: 'GET' }).handler(() => {\n  return process.env.MY_RUNTIME_VAR\n})\n\nexport const Route = createFileRoute('\u002F')({\n  loader: async () => {\n    const foo = await getRuntimeVar()\n    return { foo }\n  },\n  component: () => {\n    const { foo } = Route.useLoaderData()\n    return \u003Cdiv>{foo}\u003C\u002Fdiv>\n  },\n})\n```\n\n### Type Safety for Environment Variables\n\n```tsx\n\u002F\u002F src\u002Fenv.d.ts\n\u002F\u002F\u002F \u003Creference types=\"vite\u002Fclient\" \u002F>\n\ninterface ImportMetaEnv {\n  readonly VITE_APP_NAME: string\n  readonly VITE_API_URL: string\n}\n\ninterface ImportMeta {\n  readonly env: ImportMetaEnv\n}\n\ndeclare global {\n  namespace NodeJS {\n    interface ProcessEnv {\n      readonly DATABASE_URL: string\n      readonly JWT_SECRET: string\n    }\n  }\n}\n\nexport {}\n```\n\n## Common Mistakes\n\n### 1. CRITICAL: Assuming loaders are server-only\n\n```tsx\n\u002F\u002F WRONG — loader runs on BOTH server and client\nexport const Route = createFileRoute('\u002Fdashboard')({\n  loader: async () => {\n    const secret = process.env.API_SECRET \u002F\u002F LEAKED to client\n    return fetch(`https:\u002F\u002Fapi.example.com\u002Fdata`, {\n      headers: { Authorization: secret },\n    })\n  },\n})\n\n\u002F\u002F CORRECT — use createServerFn\nconst getData = createServerFn({ method: 'GET' }).handler(async () => {\n  const secret = process.env.API_SECRET\n  return fetch(`https:\u002F\u002Fapi.example.com\u002Fdata`, {\n    headers: { Authorization: secret },\n  })\n})\n\nexport const Route = createFileRoute('\u002Fdashboard')({\n  loader: () => getData(),\n})\n```\n\n### 2. CRITICAL: Reading process.env at module scope\n\nModule-level `process.env` reads are wrong for **two** reasons, not one:\n\n1. **Security:** the value can be inlined into the client bundle, leaking secrets.\n2. **Runtime correctness (edge runtimes):** Cloudflare Workers and other edge SSR runtimes inject env at request time. Module-level code runs at module load, before the env exists, so the read evaluates to `undefined` even on the server. The bug only surfaces at deploy time.\n\n```tsx\n\u002F\u002F WRONG — leaks to client AND is undefined on Workers\nconst apiKey = process.env.SECRET_KEY\nexport function fetchData() {\n  \u002F* uses apiKey, which is undefined under Worker SSR *\u002F\n}\n\n\u002F\u002F CORRECT — read per-request, inside the handler\nconst fetchData = createServerFn({ method: 'GET' }).handler(async () => {\n  const apiKey = process.env.SECRET_KEY\n  return fetch(url, { headers: { Authorization: apiKey } })\n})\n```\n\nThe same rule applies to middleware `.server()` callbacks, server-route handlers, and any function that runs per request — read env there, not at the top of the file.\n\n### 3. CRITICAL: Using VITE\\_ prefix for server secrets\n\n```bash\n# WRONG — exposed to client bundle\nVITE_SECRET_API_KEY=sk_live_xxx\n\n# CORRECT — no prefix for server secrets\nSECRET_API_KEY=sk_live_xxx\n\n# CORRECT — VITE_ only for public client values\nVITE_APP_NAME=My App\n```\n\n### 4. HIGH: Hydration mismatches\n\n```tsx\n\u002F\u002F WRONG — different content server vs client\nfunction CurrentTime() {\n  return \u003Cdiv>{new Date().toLocaleString()}\u003C\u002Fdiv>\n}\n\n\u002F\u002F CORRECT — consistent rendering\nfunction CurrentTime() {\n  const [time, setTime] = useState\u003Cstring>()\n  useEffect(() => {\n    setTime(new Date().toLocaleString())\n  }, [])\n  return \u003Cdiv>{time || 'Loading...'}\u003C\u002Fdiv>\n}\n```\n\n## Architecture Decision Framework\n\n**Server-Only** (`createServerFn` \u002F `createServerOnlyFn`):\n\n- Sensitive data (env vars, secrets)\n- Database connections, file system\n- External API keys\n\n**Client-Only** (`createClientOnlyFn` \u002F `\u003CClientOnly>`):\n\n- DOM manipulation, browser APIs\n- localStorage, geolocation\n- Analytics\u002Ftracking\n\n**Isomorphic** (default \u002F `createIsomorphicFn`):\n\n- Data formatting, business logic\n- Shared utilities\n- Route loaders (they're isomorphic by nature)\n\n## Cross-References\n\n- [start-core\u002Fserver-functions](..\u002Fserver-functions\u002FSKILL.md) — the primary server boundary\n- [start-core\u002Fdeployment](..\u002Fdeployment\u002FSKILL.md) — deployment target affects execution\n",{"data":45,"body":56},{"name":4,"description":6,"metadata":46,"requires":50,"sources":52},{"type":47,"library":48,"library_version":49},"sub-skill","tanstack-start","1.170.14",[51],"start-core",[53,54,55],"TanStack\u002Frouter:docs\u002Fstart\u002Fframework\u002Freact\u002Fguide\u002Fexecution-model.md","TanStack\u002Frouter:docs\u002Fstart\u002Fframework\u002Freact\u002Fguide\u002Fenvironment-variables.md","TanStack\u002Frouter:docs\u002Fstart\u002Fframework\u002Freact\u002Fguide\u002Fimport-protection.md",{"type":57,"children":58},"root",[59,67,73,169,176,449,455,462,467,764,770,775,908,914,920,1101,1107,1273,1279,1535,1568,1574,1833,1839,1847,1876,1989,2168,2173,2209,2214,2292,2298,2304,2315,2451,2457,2469,2679,2685,2697,3096,3102,3437,3443,3449,4004,4010,4028,4059,4360,4372,4378,4480,4486,4808,4814,4836,4854,4875,4893,4910,4928,4934,4960],{"type":60,"tag":61,"props":62,"children":63},"element","h1",{"id":4},[64],{"type":65,"value":66},"text","Execution Model",{"type":60,"tag":68,"props":69,"children":70},"p",{},[71],{"type":65,"value":72},"Understanding where code runs is fundamental to TanStack Start. This skill covers the isomorphic execution model and how to control environment boundaries.",{"type":60,"tag":74,"props":75,"children":76},"blockquote",{},[77],{"type":60,"tag":68,"props":78,"children":79},{},[80,86,88,95,97,101,103,109,111,116,118,124,126,132,134,138,140,146,148,153,155,159,161,167],{"type":60,"tag":81,"props":82,"children":83},"strong",{},[84],{"type":65,"value":85},"CRITICAL",{"type":65,"value":87},": ALL code in TanStack Start is isomorphic by default — it runs in BOTH server and client bundles. Route loaders run on BOTH server (during SSR) AND client (during navigation). Server-only operations MUST use ",{"type":60,"tag":89,"props":90,"children":92},"code",{"className":91},[],[93],{"type":65,"value":94},"createServerFn",{"type":65,"value":96},".\n",{"type":60,"tag":81,"props":98,"children":99},{},[100],{"type":65,"value":85},{"type":65,"value":102},": Module-level ",{"type":60,"tag":89,"props":104,"children":106},{"className":105},[],[107],{"type":65,"value":108},"process.env",{"type":65,"value":110}," access is wrong on ",{"type":60,"tag":81,"props":112,"children":113},{},[114],{"type":65,"value":115},"two",{"type":65,"value":117}," axes — security (values leak into the client bundle) AND runtime correctness (on Cloudflare Workers and other edge runtimes, env is injected per-request, so module-level reads evaluate to ",{"type":60,"tag":89,"props":119,"children":121},{"className":120},[],[122],{"type":65,"value":123},"undefined",{"type":65,"value":125}," even on the server). Read env inside ",{"type":60,"tag":89,"props":127,"children":129},{"className":128},[],[130],{"type":65,"value":131},".handler()",{"type":65,"value":133}," or another per-request function, never at module scope.\n",{"type":60,"tag":81,"props":135,"children":136},{},[137],{"type":65,"value":85},{"type":65,"value":139},": ",{"type":60,"tag":89,"props":141,"children":143},{"className":142},[],[144],{"type":65,"value":145},"VITE_",{"type":65,"value":147}," prefixed environment variables are exposed to the client bundle. Server secrets must NOT have the ",{"type":60,"tag":89,"props":149,"children":151},{"className":150},[],[152],{"type":65,"value":145},{"type":65,"value":154}," prefix.\n",{"type":60,"tag":81,"props":156,"children":157},{},[158],{"type":65,"value":85},{"type":65,"value":160},": Relative URLs belong to browser-only code. An isomorphic loader also runs during SSR, where ",{"type":60,"tag":89,"props":162,"children":164},{"className":163},[],[165],{"type":65,"value":166},"fetch('\u002Fapi\u002F...')",{"type":65,"value":168}," may have no base URL. Call a server function from the loader, or keep the fetch inside an explicit environment boundary.",{"type":60,"tag":170,"props":171,"children":173},"h2",{"id":172},"execution-control-apis",[174],{"type":65,"value":175},"Execution Control APIs",{"type":60,"tag":177,"props":178,"children":179},"table",{},[180,209],{"type":60,"tag":181,"props":182,"children":183},"thead",{},[184],{"type":60,"tag":185,"props":186,"children":187},"tr",{},[188,194,199,204],{"type":60,"tag":189,"props":190,"children":191},"th",{},[192],{"type":65,"value":193},"API",{"type":60,"tag":189,"props":195,"children":196},{},[197],{"type":65,"value":198},"Use Case",{"type":60,"tag":189,"props":200,"children":201},{},[202],{"type":65,"value":203},"Client Behavior",{"type":60,"tag":189,"props":205,"children":206},{},[207],{"type":65,"value":208},"Server Behavior",{"type":60,"tag":210,"props":211,"children":212},"tbody",{},[213,241,267,292,333,360,397,424],{"type":60,"tag":185,"props":214,"children":215},{},[216,226,231,236],{"type":60,"tag":217,"props":218,"children":219},"td",{},[220],{"type":60,"tag":89,"props":221,"children":223},{"className":222},[],[224],{"type":65,"value":225},"createServerFn()",{"type":60,"tag":217,"props":227,"children":228},{},[229],{"type":65,"value":230},"RPC calls, data mutations",{"type":60,"tag":217,"props":232,"children":233},{},[234],{"type":65,"value":235},"Network request to server",{"type":60,"tag":217,"props":237,"children":238},{},[239],{"type":65,"value":240},"Direct execution",{"type":60,"tag":185,"props":242,"children":243},{},[244,253,258,263],{"type":60,"tag":217,"props":245,"children":246},{},[247],{"type":60,"tag":89,"props":248,"children":250},{"className":249},[],[251],{"type":65,"value":252},"createServerOnlyFn(fn)",{"type":60,"tag":217,"props":254,"children":255},{},[256],{"type":65,"value":257},"Utility functions",{"type":60,"tag":217,"props":259,"children":260},{},[261],{"type":65,"value":262},"Throws error",{"type":60,"tag":217,"props":264,"children":265},{},[266],{"type":65,"value":240},{"type":60,"tag":185,"props":268,"children":269},{},[270,279,284,288],{"type":60,"tag":217,"props":271,"children":272},{},[273],{"type":60,"tag":89,"props":274,"children":276},{"className":275},[],[277],{"type":65,"value":278},"createClientOnlyFn(fn)",{"type":60,"tag":217,"props":280,"children":281},{},[282],{"type":65,"value":283},"Browser utilities",{"type":60,"tag":217,"props":285,"children":286},{},[287],{"type":65,"value":240},{"type":60,"tag":217,"props":289,"children":290},{},[291],{"type":65,"value":262},{"type":60,"tag":185,"props":293,"children":294},{},[295,304,309,322],{"type":60,"tag":217,"props":296,"children":297},{},[298],{"type":60,"tag":89,"props":299,"children":301},{"className":300},[],[302],{"type":65,"value":303},"createIsomorphicFn()",{"type":60,"tag":217,"props":305,"children":306},{},[307],{"type":65,"value":308},"Different impl per env",{"type":60,"tag":217,"props":310,"children":311},{},[312,314,320],{"type":65,"value":313},"Uses ",{"type":60,"tag":89,"props":315,"children":317},{"className":316},[],[318],{"type":65,"value":319},".client()",{"type":65,"value":321}," impl",{"type":60,"tag":217,"props":323,"children":324},{},[325,326,332],{"type":65,"value":313},{"type":60,"tag":89,"props":327,"children":329},{"className":328},[],[330],{"type":65,"value":331},".server()",{"type":65,"value":321},{"type":60,"tag":185,"props":334,"children":335},{},[336,345,350,355],{"type":60,"tag":217,"props":337,"children":338},{},[339],{"type":60,"tag":89,"props":340,"children":342},{"className":341},[],[343],{"type":65,"value":344},"\u003CClientOnly>",{"type":60,"tag":217,"props":346,"children":347},{},[348],{"type":65,"value":349},"Browser-only components",{"type":60,"tag":217,"props":351,"children":352},{},[353],{"type":65,"value":354},"Renders children",{"type":60,"tag":217,"props":356,"children":357},{},[358],{"type":65,"value":359},"Renders fallback",{"type":60,"tag":185,"props":361,"children":362},{},[363,372,377,388],{"type":60,"tag":217,"props":364,"children":365},{},[366],{"type":60,"tag":89,"props":367,"children":369},{"className":368},[],[370],{"type":65,"value":371},"useHydrated()",{"type":60,"tag":217,"props":373,"children":374},{},[375],{"type":65,"value":376},"Hydration-dependent logic",{"type":60,"tag":217,"props":378,"children":379},{},[380,386],{"type":60,"tag":89,"props":381,"children":383},{"className":382},[],[384],{"type":65,"value":385},"true",{"type":65,"value":387}," after hydration",{"type":60,"tag":217,"props":389,"children":390},{},[391],{"type":60,"tag":89,"props":392,"children":394},{"className":393},[],[395],{"type":65,"value":396},"false",{"type":60,"tag":185,"props":398,"children":399},{},[400,409,414,419],{"type":60,"tag":217,"props":401,"children":402},{},[403],{"type":60,"tag":89,"props":404,"children":406},{"className":405},[],[407],{"type":65,"value":408},"import '@tanstack\u002F\u003Cfw>-start\u002Fserver-only'",{"type":60,"tag":217,"props":410,"children":411},{},[412],{"type":65,"value":413},"Mark whole file server-only",{"type":60,"tag":217,"props":415,"children":416},{},[417],{"type":65,"value":418},"Import denied",{"type":60,"tag":217,"props":420,"children":421},{},[422],{"type":65,"value":423},"Allowed",{"type":60,"tag":185,"props":425,"children":426},{},[427,436,441,445],{"type":60,"tag":217,"props":428,"children":429},{},[430],{"type":60,"tag":89,"props":431,"children":433},{"className":432},[],[434],{"type":65,"value":435},"import '@tanstack\u002F\u003Cfw>-start\u002Fclient-only'",{"type":60,"tag":217,"props":437,"children":438},{},[439],{"type":65,"value":440},"Mark whole file client-only",{"type":60,"tag":217,"props":442,"children":443},{},[444],{"type":65,"value":423},{"type":60,"tag":217,"props":446,"children":447},{},[448],{"type":65,"value":418},{"type":60,"tag":170,"props":450,"children":452},{"id":451},"server-only-execution",[453],{"type":65,"value":454},"Server-Only Execution",{"type":60,"tag":456,"props":457,"children":459},"h3",{"id":458},"createserverfn-rpc-pattern",[460],{"type":65,"value":461},"createServerFn (RPC pattern)",{"type":60,"tag":68,"props":463,"children":464},{},[465],{"type":65,"value":466},"The primary way to run server-only code. On the client, calls become fetch requests:",{"type":60,"tag":468,"props":469,"children":474},"pre",{"className":470,"code":471,"language":472,"meta":473,"style":473},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Use @tanstack\u002F\u003Cframework>-start for your framework (react, solid, vue)\nimport { createServerFn } from '@tanstack\u002Freact-start'\n\nconst fetchUser = createServerFn().handler(async () => {\n  const secret = process.env.API_SECRET \u002F\u002F safe — server only\n  return await db.users.find()\n})\n\n\u002F\u002F Client calls this via network request\nconst user = await fetchUser()\n","tsx","",[475],{"type":60,"tag":89,"props":476,"children":477},{"__ignoreMap":473},[478,490,538,548,613,660,703,717,725,734],{"type":60,"tag":479,"props":480,"children":483},"span",{"class":481,"line":482},"line",1,[484],{"type":60,"tag":479,"props":485,"children":487},{"style":486},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[488],{"type":65,"value":489},"\u002F\u002F Use @tanstack\u002F\u003Cframework>-start for your framework (react, solid, vue)\n",{"type":60,"tag":479,"props":491,"children":493},{"class":481,"line":492},2,[494,500,506,512,517,522,527,533],{"type":60,"tag":479,"props":495,"children":497},{"style":496},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[498],{"type":65,"value":499},"import",{"type":60,"tag":479,"props":501,"children":503},{"style":502},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[504],{"type":65,"value":505}," {",{"type":60,"tag":479,"props":507,"children":509},{"style":508},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[510],{"type":65,"value":511}," createServerFn",{"type":60,"tag":479,"props":513,"children":514},{"style":502},[515],{"type":65,"value":516}," }",{"type":60,"tag":479,"props":518,"children":519},{"style":496},[520],{"type":65,"value":521}," from",{"type":60,"tag":479,"props":523,"children":524},{"style":502},[525],{"type":65,"value":526}," '",{"type":60,"tag":479,"props":528,"children":530},{"style":529},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[531],{"type":65,"value":532},"@tanstack\u002Freact-start",{"type":60,"tag":479,"props":534,"children":535},{"style":502},[536],{"type":65,"value":537},"'\n",{"type":60,"tag":479,"props":539,"children":541},{"class":481,"line":540},3,[542],{"type":60,"tag":479,"props":543,"children":545},{"emptyLinePlaceholder":544},true,[546],{"type":65,"value":547},"\n",{"type":60,"tag":479,"props":549,"children":551},{"class":481,"line":550},4,[552,558,563,568,573,578,583,588,593,598,603,608],{"type":60,"tag":479,"props":553,"children":555},{"style":554},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[556],{"type":65,"value":557},"const",{"type":60,"tag":479,"props":559,"children":560},{"style":508},[561],{"type":65,"value":562}," fetchUser ",{"type":60,"tag":479,"props":564,"children":565},{"style":502},[566],{"type":65,"value":567},"=",{"type":60,"tag":479,"props":569,"children":571},{"style":570},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[572],{"type":65,"value":511},{"type":60,"tag":479,"props":574,"children":575},{"style":508},[576],{"type":65,"value":577},"()",{"type":60,"tag":479,"props":579,"children":580},{"style":502},[581],{"type":65,"value":582},".",{"type":60,"tag":479,"props":584,"children":585},{"style":570},[586],{"type":65,"value":587},"handler",{"type":60,"tag":479,"props":589,"children":590},{"style":508},[591],{"type":65,"value":592},"(",{"type":60,"tag":479,"props":594,"children":595},{"style":554},[596],{"type":65,"value":597},"async",{"type":60,"tag":479,"props":599,"children":600},{"style":502},[601],{"type":65,"value":602}," ()",{"type":60,"tag":479,"props":604,"children":605},{"style":554},[606],{"type":65,"value":607}," =>",{"type":60,"tag":479,"props":609,"children":610},{"style":502},[611],{"type":65,"value":612}," {\n",{"type":60,"tag":479,"props":614,"children":616},{"class":481,"line":615},5,[617,622,627,632,637,641,646,650,655],{"type":60,"tag":479,"props":618,"children":619},{"style":554},[620],{"type":65,"value":621},"  const",{"type":60,"tag":479,"props":623,"children":624},{"style":508},[625],{"type":65,"value":626}," secret",{"type":60,"tag":479,"props":628,"children":629},{"style":502},[630],{"type":65,"value":631}," =",{"type":60,"tag":479,"props":633,"children":634},{"style":508},[635],{"type":65,"value":636}," process",{"type":60,"tag":479,"props":638,"children":639},{"style":502},[640],{"type":65,"value":582},{"type":60,"tag":479,"props":642,"children":643},{"style":508},[644],{"type":65,"value":645},"env",{"type":60,"tag":479,"props":647,"children":648},{"style":502},[649],{"type":65,"value":582},{"type":60,"tag":479,"props":651,"children":652},{"style":508},[653],{"type":65,"value":654},"API_SECRET",{"type":60,"tag":479,"props":656,"children":657},{"style":486},[658],{"type":65,"value":659}," \u002F\u002F safe — server only\n",{"type":60,"tag":479,"props":661,"children":663},{"class":481,"line":662},6,[664,669,674,679,683,688,692,697],{"type":60,"tag":479,"props":665,"children":666},{"style":496},[667],{"type":65,"value":668},"  return",{"type":60,"tag":479,"props":670,"children":671},{"style":496},[672],{"type":65,"value":673}," await",{"type":60,"tag":479,"props":675,"children":676},{"style":508},[677],{"type":65,"value":678}," db",{"type":60,"tag":479,"props":680,"children":681},{"style":502},[682],{"type":65,"value":582},{"type":60,"tag":479,"props":684,"children":685},{"style":508},[686],{"type":65,"value":687},"users",{"type":60,"tag":479,"props":689,"children":690},{"style":502},[691],{"type":65,"value":582},{"type":60,"tag":479,"props":693,"children":694},{"style":570},[695],{"type":65,"value":696},"find",{"type":60,"tag":479,"props":698,"children":700},{"style":699},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[701],{"type":65,"value":702},"()\n",{"type":60,"tag":479,"props":704,"children":706},{"class":481,"line":705},7,[707,712],{"type":60,"tag":479,"props":708,"children":709},{"style":502},[710],{"type":65,"value":711},"}",{"type":60,"tag":479,"props":713,"children":714},{"style":508},[715],{"type":65,"value":716},")\n",{"type":60,"tag":479,"props":718,"children":720},{"class":481,"line":719},8,[721],{"type":60,"tag":479,"props":722,"children":723},{"emptyLinePlaceholder":544},[724],{"type":65,"value":547},{"type":60,"tag":479,"props":726,"children":728},{"class":481,"line":727},9,[729],{"type":60,"tag":479,"props":730,"children":731},{"style":486},[732],{"type":65,"value":733},"\u002F\u002F Client calls this via network request\n",{"type":60,"tag":479,"props":735,"children":737},{"class":481,"line":736},10,[738,742,747,751,755,760],{"type":60,"tag":479,"props":739,"children":740},{"style":554},[741],{"type":65,"value":557},{"type":60,"tag":479,"props":743,"children":744},{"style":508},[745],{"type":65,"value":746}," user ",{"type":60,"tag":479,"props":748,"children":749},{"style":502},[750],{"type":65,"value":567},{"type":60,"tag":479,"props":752,"children":753},{"style":496},[754],{"type":65,"value":673},{"type":60,"tag":479,"props":756,"children":757},{"style":570},[758],{"type":65,"value":759}," fetchUser",{"type":60,"tag":479,"props":761,"children":762},{"style":508},[763],{"type":65,"value":702},{"type":60,"tag":456,"props":765,"children":767},{"id":766},"createserveronlyfn-throws-on-client",[768],{"type":65,"value":769},"createServerOnlyFn (throws on client)",{"type":60,"tag":68,"props":771,"children":772},{},[773],{"type":65,"value":774},"For utility functions that must never run on client:",{"type":60,"tag":468,"props":776,"children":778},{"className":470,"code":777,"language":472,"meta":473,"style":473},"\u002F\u002F Use @tanstack\u002F\u003Cframework>-start for your framework (react, solid, vue)\nimport { createServerOnlyFn } from '@tanstack\u002Freact-start'\n\nconst getSecret = createServerOnlyFn(() => process.env.DATABASE_URL)\n\n\u002F\u002F Server: returns the value\n\u002F\u002F Client: THROWS an error\n",[779],{"type":60,"tag":89,"props":780,"children":781},{"__ignoreMap":473},[782,789,825,832,885,892,900],{"type":60,"tag":479,"props":783,"children":784},{"class":481,"line":482},[785],{"type":60,"tag":479,"props":786,"children":787},{"style":486},[788],{"type":65,"value":489},{"type":60,"tag":479,"props":790,"children":791},{"class":481,"line":492},[792,796,800,805,809,813,817,821],{"type":60,"tag":479,"props":793,"children":794},{"style":496},[795],{"type":65,"value":499},{"type":60,"tag":479,"props":797,"children":798},{"style":502},[799],{"type":65,"value":505},{"type":60,"tag":479,"props":801,"children":802},{"style":508},[803],{"type":65,"value":804}," createServerOnlyFn",{"type":60,"tag":479,"props":806,"children":807},{"style":502},[808],{"type":65,"value":516},{"type":60,"tag":479,"props":810,"children":811},{"style":496},[812],{"type":65,"value":521},{"type":60,"tag":479,"props":814,"children":815},{"style":502},[816],{"type":65,"value":526},{"type":60,"tag":479,"props":818,"children":819},{"style":529},[820],{"type":65,"value":532},{"type":60,"tag":479,"props":822,"children":823},{"style":502},[824],{"type":65,"value":537},{"type":60,"tag":479,"props":826,"children":827},{"class":481,"line":540},[828],{"type":60,"tag":479,"props":829,"children":830},{"emptyLinePlaceholder":544},[831],{"type":65,"value":547},{"type":60,"tag":479,"props":833,"children":834},{"class":481,"line":550},[835,839,844,848,852,856,860,864,868,872,876,880],{"type":60,"tag":479,"props":836,"children":837},{"style":554},[838],{"type":65,"value":557},{"type":60,"tag":479,"props":840,"children":841},{"style":508},[842],{"type":65,"value":843}," getSecret ",{"type":60,"tag":479,"props":845,"children":846},{"style":502},[847],{"type":65,"value":567},{"type":60,"tag":479,"props":849,"children":850},{"style":570},[851],{"type":65,"value":804},{"type":60,"tag":479,"props":853,"children":854},{"style":508},[855],{"type":65,"value":592},{"type":60,"tag":479,"props":857,"children":858},{"style":502},[859],{"type":65,"value":577},{"type":60,"tag":479,"props":861,"children":862},{"style":554},[863],{"type":65,"value":607},{"type":60,"tag":479,"props":865,"children":866},{"style":508},[867],{"type":65,"value":636},{"type":60,"tag":479,"props":869,"children":870},{"style":502},[871],{"type":65,"value":582},{"type":60,"tag":479,"props":873,"children":874},{"style":508},[875],{"type":65,"value":645},{"type":60,"tag":479,"props":877,"children":878},{"style":502},[879],{"type":65,"value":582},{"type":60,"tag":479,"props":881,"children":882},{"style":508},[883],{"type":65,"value":884},"DATABASE_URL)\n",{"type":60,"tag":479,"props":886,"children":887},{"class":481,"line":615},[888],{"type":60,"tag":479,"props":889,"children":890},{"emptyLinePlaceholder":544},[891],{"type":65,"value":547},{"type":60,"tag":479,"props":893,"children":894},{"class":481,"line":662},[895],{"type":60,"tag":479,"props":896,"children":897},{"style":486},[898],{"type":65,"value":899},"\u002F\u002F Server: returns the value\n",{"type":60,"tag":479,"props":901,"children":902},{"class":481,"line":705},[903],{"type":60,"tag":479,"props":904,"children":905},{"style":486},[906],{"type":65,"value":907},"\u002F\u002F Client: THROWS an error\n",{"type":60,"tag":170,"props":909,"children":911},{"id":910},"client-only-execution",[912],{"type":65,"value":913},"Client-Only Execution",{"type":60,"tag":456,"props":915,"children":917},{"id":916},"createclientonlyfn",[918],{"type":65,"value":919},"createClientOnlyFn",{"type":60,"tag":468,"props":921,"children":923},{"className":470,"code":922,"language":472,"meta":473,"style":473},"\u002F\u002F Use @tanstack\u002F\u003Cframework>-start for your framework (react, solid, vue)\nimport { createClientOnlyFn } from '@tanstack\u002Freact-start'\n\nconst saveToStorage = createClientOnlyFn((key: string, value: string) => {\n  localStorage.setItem(key, value)\n})\n",[924],{"type":60,"tag":89,"props":925,"children":926},{"__ignoreMap":473},[927,934,970,977,1053,1090],{"type":60,"tag":479,"props":928,"children":929},{"class":481,"line":482},[930],{"type":60,"tag":479,"props":931,"children":932},{"style":486},[933],{"type":65,"value":489},{"type":60,"tag":479,"props":935,"children":936},{"class":481,"line":492},[937,941,945,950,954,958,962,966],{"type":60,"tag":479,"props":938,"children":939},{"style":496},[940],{"type":65,"value":499},{"type":60,"tag":479,"props":942,"children":943},{"style":502},[944],{"type":65,"value":505},{"type":60,"tag":479,"props":946,"children":947},{"style":508},[948],{"type":65,"value":949}," createClientOnlyFn",{"type":60,"tag":479,"props":951,"children":952},{"style":502},[953],{"type":65,"value":516},{"type":60,"tag":479,"props":955,"children":956},{"style":496},[957],{"type":65,"value":521},{"type":60,"tag":479,"props":959,"children":960},{"style":502},[961],{"type":65,"value":526},{"type":60,"tag":479,"props":963,"children":964},{"style":529},[965],{"type":65,"value":532},{"type":60,"tag":479,"props":967,"children":968},{"style":502},[969],{"type":65,"value":537},{"type":60,"tag":479,"props":971,"children":972},{"class":481,"line":540},[973],{"type":60,"tag":479,"props":974,"children":975},{"emptyLinePlaceholder":544},[976],{"type":65,"value":547},{"type":60,"tag":479,"props":978,"children":979},{"class":481,"line":550},[980,984,989,993,997,1001,1005,1011,1016,1022,1027,1032,1036,1040,1045,1049],{"type":60,"tag":479,"props":981,"children":982},{"style":554},[983],{"type":65,"value":557},{"type":60,"tag":479,"props":985,"children":986},{"style":508},[987],{"type":65,"value":988}," saveToStorage ",{"type":60,"tag":479,"props":990,"children":991},{"style":502},[992],{"type":65,"value":567},{"type":60,"tag":479,"props":994,"children":995},{"style":570},[996],{"type":65,"value":949},{"type":60,"tag":479,"props":998,"children":999},{"style":508},[1000],{"type":65,"value":592},{"type":60,"tag":479,"props":1002,"children":1003},{"style":502},[1004],{"type":65,"value":592},{"type":60,"tag":479,"props":1006,"children":1008},{"style":1007},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[1009],{"type":65,"value":1010},"key",{"type":60,"tag":479,"props":1012,"children":1013},{"style":502},[1014],{"type":65,"value":1015},":",{"type":60,"tag":479,"props":1017,"children":1019},{"style":1018},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[1020],{"type":65,"value":1021}," string",{"type":60,"tag":479,"props":1023,"children":1024},{"style":502},[1025],{"type":65,"value":1026},",",{"type":60,"tag":479,"props":1028,"children":1029},{"style":1007},[1030],{"type":65,"value":1031}," value",{"type":60,"tag":479,"props":1033,"children":1034},{"style":502},[1035],{"type":65,"value":1015},{"type":60,"tag":479,"props":1037,"children":1038},{"style":1018},[1039],{"type":65,"value":1021},{"type":60,"tag":479,"props":1041,"children":1042},{"style":502},[1043],{"type":65,"value":1044},")",{"type":60,"tag":479,"props":1046,"children":1047},{"style":554},[1048],{"type":65,"value":607},{"type":60,"tag":479,"props":1050,"children":1051},{"style":502},[1052],{"type":65,"value":612},{"type":60,"tag":479,"props":1054,"children":1055},{"class":481,"line":615},[1056,1061,1065,1070,1074,1078,1082,1086],{"type":60,"tag":479,"props":1057,"children":1058},{"style":508},[1059],{"type":65,"value":1060},"  localStorage",{"type":60,"tag":479,"props":1062,"children":1063},{"style":502},[1064],{"type":65,"value":582},{"type":60,"tag":479,"props":1066,"children":1067},{"style":570},[1068],{"type":65,"value":1069},"setItem",{"type":60,"tag":479,"props":1071,"children":1072},{"style":699},[1073],{"type":65,"value":592},{"type":60,"tag":479,"props":1075,"children":1076},{"style":508},[1077],{"type":65,"value":1010},{"type":60,"tag":479,"props":1079,"children":1080},{"style":502},[1081],{"type":65,"value":1026},{"type":60,"tag":479,"props":1083,"children":1084},{"style":508},[1085],{"type":65,"value":1031},{"type":60,"tag":479,"props":1087,"children":1088},{"style":699},[1089],{"type":65,"value":716},{"type":60,"tag":479,"props":1091,"children":1092},{"class":481,"line":662},[1093,1097],{"type":60,"tag":479,"props":1094,"children":1095},{"style":502},[1096],{"type":65,"value":711},{"type":60,"tag":479,"props":1098,"children":1099},{"style":508},[1100],{"type":65,"value":716},{"type":60,"tag":456,"props":1102,"children":1104},{"id":1103},"clientonly-component",[1105],{"type":65,"value":1106},"ClientOnly Component",{"type":60,"tag":468,"props":1108,"children":1110},{"className":470,"code":1109,"language":472,"meta":473,"style":473},"\u002F\u002F Use @tanstack\u002F\u003Cframework>-router for your framework (react, solid, vue)\nimport { ClientOnly } from '@tanstack\u002Freact-router'\n\nfunction Analytics() {\n  return (\n    \u003CClientOnly fallback={null}>\n      \u003CGoogleAnalyticsScript \u002F>\n    \u003C\u002FClientOnly>\n  )\n}\n",[1111],{"type":60,"tag":89,"props":1112,"children":1113},{"__ignoreMap":473},[1114,1122,1159,1166,1187,1199,1222,1240,1257,1265],{"type":60,"tag":479,"props":1115,"children":1116},{"class":481,"line":482},[1117],{"type":60,"tag":479,"props":1118,"children":1119},{"style":486},[1120],{"type":65,"value":1121},"\u002F\u002F Use @tanstack\u002F\u003Cframework>-router for your framework (react, solid, vue)\n",{"type":60,"tag":479,"props":1123,"children":1124},{"class":481,"line":492},[1125,1129,1133,1138,1142,1146,1150,1155],{"type":60,"tag":479,"props":1126,"children":1127},{"style":496},[1128],{"type":65,"value":499},{"type":60,"tag":479,"props":1130,"children":1131},{"style":502},[1132],{"type":65,"value":505},{"type":60,"tag":479,"props":1134,"children":1135},{"style":508},[1136],{"type":65,"value":1137}," ClientOnly",{"type":60,"tag":479,"props":1139,"children":1140},{"style":502},[1141],{"type":65,"value":516},{"type":60,"tag":479,"props":1143,"children":1144},{"style":496},[1145],{"type":65,"value":521},{"type":60,"tag":479,"props":1147,"children":1148},{"style":502},[1149],{"type":65,"value":526},{"type":60,"tag":479,"props":1151,"children":1152},{"style":529},[1153],{"type":65,"value":1154},"@tanstack\u002Freact-router",{"type":60,"tag":479,"props":1156,"children":1157},{"style":502},[1158],{"type":65,"value":537},{"type":60,"tag":479,"props":1160,"children":1161},{"class":481,"line":540},[1162],{"type":60,"tag":479,"props":1163,"children":1164},{"emptyLinePlaceholder":544},[1165],{"type":65,"value":547},{"type":60,"tag":479,"props":1167,"children":1168},{"class":481,"line":550},[1169,1174,1179,1183],{"type":60,"tag":479,"props":1170,"children":1171},{"style":554},[1172],{"type":65,"value":1173},"function",{"type":60,"tag":479,"props":1175,"children":1176},{"style":570},[1177],{"type":65,"value":1178}," Analytics",{"type":60,"tag":479,"props":1180,"children":1181},{"style":502},[1182],{"type":65,"value":577},{"type":60,"tag":479,"props":1184,"children":1185},{"style":502},[1186],{"type":65,"value":612},{"type":60,"tag":479,"props":1188,"children":1189},{"class":481,"line":615},[1190,1194],{"type":60,"tag":479,"props":1191,"children":1192},{"style":496},[1193],{"type":65,"value":668},{"type":60,"tag":479,"props":1195,"children":1196},{"style":699},[1197],{"type":65,"value":1198}," (\n",{"type":60,"tag":479,"props":1200,"children":1201},{"class":481,"line":662},[1202,1207,1212,1217],{"type":60,"tag":479,"props":1203,"children":1204},{"style":502},[1205],{"type":65,"value":1206},"    \u003C",{"type":60,"tag":479,"props":1208,"children":1209},{"style":1018},[1210],{"type":65,"value":1211},"ClientOnly",{"type":60,"tag":479,"props":1213,"children":1214},{"style":554},[1215],{"type":65,"value":1216}," fallback",{"type":60,"tag":479,"props":1218,"children":1219},{"style":502},[1220],{"type":65,"value":1221},"={null}>\n",{"type":60,"tag":479,"props":1223,"children":1224},{"class":481,"line":705},[1225,1230,1235],{"type":60,"tag":479,"props":1226,"children":1227},{"style":502},[1228],{"type":65,"value":1229},"      \u003C",{"type":60,"tag":479,"props":1231,"children":1232},{"style":1018},[1233],{"type":65,"value":1234},"GoogleAnalyticsScript",{"type":60,"tag":479,"props":1236,"children":1237},{"style":502},[1238],{"type":65,"value":1239}," \u002F>\n",{"type":60,"tag":479,"props":1241,"children":1242},{"class":481,"line":719},[1243,1248,1252],{"type":60,"tag":479,"props":1244,"children":1245},{"style":502},[1246],{"type":65,"value":1247},"    \u003C\u002F",{"type":60,"tag":479,"props":1249,"children":1250},{"style":1018},[1251],{"type":65,"value":1211},{"type":60,"tag":479,"props":1253,"children":1254},{"style":502},[1255],{"type":65,"value":1256},">\n",{"type":60,"tag":479,"props":1258,"children":1259},{"class":481,"line":727},[1260],{"type":60,"tag":479,"props":1261,"children":1262},{"style":699},[1263],{"type":65,"value":1264},"  )\n",{"type":60,"tag":479,"props":1266,"children":1267},{"class":481,"line":736},[1268],{"type":60,"tag":479,"props":1269,"children":1270},{"style":502},[1271],{"type":65,"value":1272},"}\n",{"type":60,"tag":456,"props":1274,"children":1276},{"id":1275},"usehydrated-hook",[1277],{"type":65,"value":1278},"useHydrated Hook",{"type":60,"tag":468,"props":1280,"children":1282},{"className":470,"code":1281,"language":472,"meta":473,"style":473},"\u002F\u002F Use @tanstack\u002F\u003Cframework>-router for your framework (react, solid, vue)\nimport { useHydrated } from '@tanstack\u002Freact-router'\n\nfunction TimeZoneDisplay() {\n  const hydrated = useHydrated()\n  const timeZone = hydrated\n    ? Intl.DateTimeFormat().resolvedOptions().timeZone\n    : 'UTC'\n\n  return \u003Cdiv>Your timezone: {timeZone}\u003C\u002Fdiv>\n}\n",[1283],{"type":60,"tag":89,"props":1284,"children":1285},{"__ignoreMap":473},[1286,1293,1329,1336,1356,1380,1401,1449,1470,1477,1527],{"type":60,"tag":479,"props":1287,"children":1288},{"class":481,"line":482},[1289],{"type":60,"tag":479,"props":1290,"children":1291},{"style":486},[1292],{"type":65,"value":1121},{"type":60,"tag":479,"props":1294,"children":1295},{"class":481,"line":492},[1296,1300,1304,1309,1313,1317,1321,1325],{"type":60,"tag":479,"props":1297,"children":1298},{"style":496},[1299],{"type":65,"value":499},{"type":60,"tag":479,"props":1301,"children":1302},{"style":502},[1303],{"type":65,"value":505},{"type":60,"tag":479,"props":1305,"children":1306},{"style":508},[1307],{"type":65,"value":1308}," useHydrated",{"type":60,"tag":479,"props":1310,"children":1311},{"style":502},[1312],{"type":65,"value":516},{"type":60,"tag":479,"props":1314,"children":1315},{"style":496},[1316],{"type":65,"value":521},{"type":60,"tag":479,"props":1318,"children":1319},{"style":502},[1320],{"type":65,"value":526},{"type":60,"tag":479,"props":1322,"children":1323},{"style":529},[1324],{"type":65,"value":1154},{"type":60,"tag":479,"props":1326,"children":1327},{"style":502},[1328],{"type":65,"value":537},{"type":60,"tag":479,"props":1330,"children":1331},{"class":481,"line":540},[1332],{"type":60,"tag":479,"props":1333,"children":1334},{"emptyLinePlaceholder":544},[1335],{"type":65,"value":547},{"type":60,"tag":479,"props":1337,"children":1338},{"class":481,"line":550},[1339,1343,1348,1352],{"type":60,"tag":479,"props":1340,"children":1341},{"style":554},[1342],{"type":65,"value":1173},{"type":60,"tag":479,"props":1344,"children":1345},{"style":570},[1346],{"type":65,"value":1347}," TimeZoneDisplay",{"type":60,"tag":479,"props":1349,"children":1350},{"style":502},[1351],{"type":65,"value":577},{"type":60,"tag":479,"props":1353,"children":1354},{"style":502},[1355],{"type":65,"value":612},{"type":60,"tag":479,"props":1357,"children":1358},{"class":481,"line":615},[1359,1363,1368,1372,1376],{"type":60,"tag":479,"props":1360,"children":1361},{"style":554},[1362],{"type":65,"value":621},{"type":60,"tag":479,"props":1364,"children":1365},{"style":508},[1366],{"type":65,"value":1367}," hydrated",{"type":60,"tag":479,"props":1369,"children":1370},{"style":502},[1371],{"type":65,"value":631},{"type":60,"tag":479,"props":1373,"children":1374},{"style":570},[1375],{"type":65,"value":1308},{"type":60,"tag":479,"props":1377,"children":1378},{"style":699},[1379],{"type":65,"value":702},{"type":60,"tag":479,"props":1381,"children":1382},{"class":481,"line":662},[1383,1387,1392,1396],{"type":60,"tag":479,"props":1384,"children":1385},{"style":554},[1386],{"type":65,"value":621},{"type":60,"tag":479,"props":1388,"children":1389},{"style":508},[1390],{"type":65,"value":1391}," timeZone",{"type":60,"tag":479,"props":1393,"children":1394},{"style":502},[1395],{"type":65,"value":631},{"type":60,"tag":479,"props":1397,"children":1398},{"style":508},[1399],{"type":65,"value":1400}," hydrated\n",{"type":60,"tag":479,"props":1402,"children":1403},{"class":481,"line":705},[1404,1409,1414,1418,1423,1427,1431,1436,1440,1444],{"type":60,"tag":479,"props":1405,"children":1406},{"style":502},[1407],{"type":65,"value":1408},"    ?",{"type":60,"tag":479,"props":1410,"children":1411},{"style":508},[1412],{"type":65,"value":1413}," Intl",{"type":60,"tag":479,"props":1415,"children":1416},{"style":502},[1417],{"type":65,"value":582},{"type":60,"tag":479,"props":1419,"children":1420},{"style":570},[1421],{"type":65,"value":1422},"DateTimeFormat",{"type":60,"tag":479,"props":1424,"children":1425},{"style":699},[1426],{"type":65,"value":577},{"type":60,"tag":479,"props":1428,"children":1429},{"style":502},[1430],{"type":65,"value":582},{"type":60,"tag":479,"props":1432,"children":1433},{"style":570},[1434],{"type":65,"value":1435},"resolvedOptions",{"type":60,"tag":479,"props":1437,"children":1438},{"style":699},[1439],{"type":65,"value":577},{"type":60,"tag":479,"props":1441,"children":1442},{"style":502},[1443],{"type":65,"value":582},{"type":60,"tag":479,"props":1445,"children":1446},{"style":508},[1447],{"type":65,"value":1448},"timeZone\n",{"type":60,"tag":479,"props":1450,"children":1451},{"class":481,"line":719},[1452,1457,1461,1466],{"type":60,"tag":479,"props":1453,"children":1454},{"style":502},[1455],{"type":65,"value":1456},"    :",{"type":60,"tag":479,"props":1458,"children":1459},{"style":502},[1460],{"type":65,"value":526},{"type":60,"tag":479,"props":1462,"children":1463},{"style":529},[1464],{"type":65,"value":1465},"UTC",{"type":60,"tag":479,"props":1467,"children":1468},{"style":502},[1469],{"type":65,"value":537},{"type":60,"tag":479,"props":1471,"children":1472},{"class":481,"line":727},[1473],{"type":60,"tag":479,"props":1474,"children":1475},{"emptyLinePlaceholder":544},[1476],{"type":65,"value":547},{"type":60,"tag":479,"props":1478,"children":1479},{"class":481,"line":736},[1480,1484,1489,1494,1499,1504,1509,1514,1519,1523],{"type":60,"tag":479,"props":1481,"children":1482},{"style":496},[1483],{"type":65,"value":668},{"type":60,"tag":479,"props":1485,"children":1486},{"style":502},[1487],{"type":65,"value":1488}," \u003C",{"type":60,"tag":479,"props":1490,"children":1491},{"style":699},[1492],{"type":65,"value":1493},"div",{"type":60,"tag":479,"props":1495,"children":1496},{"style":502},[1497],{"type":65,"value":1498},">",{"type":60,"tag":479,"props":1500,"children":1501},{"style":508},[1502],{"type":65,"value":1503},"Your timezone: ",{"type":60,"tag":479,"props":1505,"children":1506},{"style":502},[1507],{"type":65,"value":1508},"{",{"type":60,"tag":479,"props":1510,"children":1511},{"style":508},[1512],{"type":65,"value":1513},"timeZone",{"type":60,"tag":479,"props":1515,"children":1516},{"style":502},[1517],{"type":65,"value":1518},"}\u003C\u002F",{"type":60,"tag":479,"props":1520,"children":1521},{"style":699},[1522],{"type":65,"value":1493},{"type":60,"tag":479,"props":1524,"children":1525},{"style":502},[1526],{"type":65,"value":1256},{"type":60,"tag":479,"props":1528,"children":1530},{"class":481,"line":1529},11,[1531],{"type":60,"tag":479,"props":1532,"children":1533},{"style":502},[1534],{"type":65,"value":1272},{"type":60,"tag":68,"props":1536,"children":1537},{},[1538,1540,1545,1547,1552,1554,1559,1561,1566],{"type":65,"value":1539},"Behavior: SSR → ",{"type":60,"tag":89,"props":1541,"children":1543},{"className":1542},[],[1544],{"type":65,"value":396},{"type":65,"value":1546},", first client render → ",{"type":60,"tag":89,"props":1548,"children":1550},{"className":1549},[],[1551],{"type":65,"value":396},{"type":65,"value":1553},", after hydration → ",{"type":60,"tag":89,"props":1555,"children":1557},{"className":1556},[],[1558],{"type":65,"value":385},{"type":65,"value":1560}," (stays ",{"type":60,"tag":89,"props":1562,"children":1564},{"className":1563},[],[1565],{"type":65,"value":385},{"type":65,"value":1567},").",{"type":60,"tag":170,"props":1569,"children":1571},{"id":1570},"environment-specific-implementations",[1572],{"type":65,"value":1573},"Environment-Specific Implementations",{"type":60,"tag":468,"props":1575,"children":1577},{"className":470,"code":1576,"language":472,"meta":473,"style":473},"\u002F\u002F Use @tanstack\u002F\u003Cframework>-start for your framework (react, solid, vue)\nimport { createIsomorphicFn } from '@tanstack\u002Freact-start'\n\nconst getDeviceInfo = createIsomorphicFn()\n  .server(() => ({ type: 'server', platform: process.platform }))\n  .client(() => ({ type: 'client', userAgent: navigator.userAgent }))\n",[1578],{"type":60,"tag":89,"props":1579,"children":1580},{"__ignoreMap":473},[1581,1588,1624,1631,1655,1746],{"type":60,"tag":479,"props":1582,"children":1583},{"class":481,"line":482},[1584],{"type":60,"tag":479,"props":1585,"children":1586},{"style":486},[1587],{"type":65,"value":489},{"type":60,"tag":479,"props":1589,"children":1590},{"class":481,"line":492},[1591,1595,1599,1604,1608,1612,1616,1620],{"type":60,"tag":479,"props":1592,"children":1593},{"style":496},[1594],{"type":65,"value":499},{"type":60,"tag":479,"props":1596,"children":1597},{"style":502},[1598],{"type":65,"value":505},{"type":60,"tag":479,"props":1600,"children":1601},{"style":508},[1602],{"type":65,"value":1603}," createIsomorphicFn",{"type":60,"tag":479,"props":1605,"children":1606},{"style":502},[1607],{"type":65,"value":516},{"type":60,"tag":479,"props":1609,"children":1610},{"style":496},[1611],{"type":65,"value":521},{"type":60,"tag":479,"props":1613,"children":1614},{"style":502},[1615],{"type":65,"value":526},{"type":60,"tag":479,"props":1617,"children":1618},{"style":529},[1619],{"type":65,"value":532},{"type":60,"tag":479,"props":1621,"children":1622},{"style":502},[1623],{"type":65,"value":537},{"type":60,"tag":479,"props":1625,"children":1626},{"class":481,"line":540},[1627],{"type":60,"tag":479,"props":1628,"children":1629},{"emptyLinePlaceholder":544},[1630],{"type":65,"value":547},{"type":60,"tag":479,"props":1632,"children":1633},{"class":481,"line":550},[1634,1638,1643,1647,1651],{"type":60,"tag":479,"props":1635,"children":1636},{"style":554},[1637],{"type":65,"value":557},{"type":60,"tag":479,"props":1639,"children":1640},{"style":508},[1641],{"type":65,"value":1642}," getDeviceInfo ",{"type":60,"tag":479,"props":1644,"children":1645},{"style":502},[1646],{"type":65,"value":567},{"type":60,"tag":479,"props":1648,"children":1649},{"style":570},[1650],{"type":65,"value":1603},{"type":60,"tag":479,"props":1652,"children":1653},{"style":508},[1654],{"type":65,"value":702},{"type":60,"tag":479,"props":1656,"children":1657},{"class":481,"line":615},[1658,1663,1668,1672,1676,1680,1685,1689,1694,1698,1702,1706,1711,1715,1720,1724,1728,1732,1737,1741],{"type":60,"tag":479,"props":1659,"children":1660},{"style":502},[1661],{"type":65,"value":1662},"  .",{"type":60,"tag":479,"props":1664,"children":1665},{"style":570},[1666],{"type":65,"value":1667},"server",{"type":60,"tag":479,"props":1669,"children":1670},{"style":508},[1671],{"type":65,"value":592},{"type":60,"tag":479,"props":1673,"children":1674},{"style":502},[1675],{"type":65,"value":577},{"type":60,"tag":479,"props":1677,"children":1678},{"style":554},[1679],{"type":65,"value":607},{"type":60,"tag":479,"props":1681,"children":1682},{"style":508},[1683],{"type":65,"value":1684}," (",{"type":60,"tag":479,"props":1686,"children":1687},{"style":502},[1688],{"type":65,"value":1508},{"type":60,"tag":479,"props":1690,"children":1691},{"style":699},[1692],{"type":65,"value":1693}," type",{"type":60,"tag":479,"props":1695,"children":1696},{"style":502},[1697],{"type":65,"value":1015},{"type":60,"tag":479,"props":1699,"children":1700},{"style":502},[1701],{"type":65,"value":526},{"type":60,"tag":479,"props":1703,"children":1704},{"style":529},[1705],{"type":65,"value":1667},{"type":60,"tag":479,"props":1707,"children":1708},{"style":502},[1709],{"type":65,"value":1710},"'",{"type":60,"tag":479,"props":1712,"children":1713},{"style":502},[1714],{"type":65,"value":1026},{"type":60,"tag":479,"props":1716,"children":1717},{"style":699},[1718],{"type":65,"value":1719}," platform",{"type":60,"tag":479,"props":1721,"children":1722},{"style":502},[1723],{"type":65,"value":1015},{"type":60,"tag":479,"props":1725,"children":1726},{"style":508},[1727],{"type":65,"value":636},{"type":60,"tag":479,"props":1729,"children":1730},{"style":502},[1731],{"type":65,"value":582},{"type":60,"tag":479,"props":1733,"children":1734},{"style":508},[1735],{"type":65,"value":1736},"platform ",{"type":60,"tag":479,"props":1738,"children":1739},{"style":502},[1740],{"type":65,"value":711},{"type":60,"tag":479,"props":1742,"children":1743},{"style":508},[1744],{"type":65,"value":1745},"))\n",{"type":60,"tag":479,"props":1747,"children":1748},{"class":481,"line":662},[1749,1753,1758,1762,1766,1770,1774,1778,1782,1786,1790,1794,1798,1802,1807,1811,1816,1820,1825,1829],{"type":60,"tag":479,"props":1750,"children":1751},{"style":502},[1752],{"type":65,"value":1662},{"type":60,"tag":479,"props":1754,"children":1755},{"style":570},[1756],{"type":65,"value":1757},"client",{"type":60,"tag":479,"props":1759,"children":1760},{"style":508},[1761],{"type":65,"value":592},{"type":60,"tag":479,"props":1763,"children":1764},{"style":502},[1765],{"type":65,"value":577},{"type":60,"tag":479,"props":1767,"children":1768},{"style":554},[1769],{"type":65,"value":607},{"type":60,"tag":479,"props":1771,"children":1772},{"style":508},[1773],{"type":65,"value":1684},{"type":60,"tag":479,"props":1775,"children":1776},{"style":502},[1777],{"type":65,"value":1508},{"type":60,"tag":479,"props":1779,"children":1780},{"style":699},[1781],{"type":65,"value":1693},{"type":60,"tag":479,"props":1783,"children":1784},{"style":502},[1785],{"type":65,"value":1015},{"type":60,"tag":479,"props":1787,"children":1788},{"style":502},[1789],{"type":65,"value":526},{"type":60,"tag":479,"props":1791,"children":1792},{"style":529},[1793],{"type":65,"value":1757},{"type":60,"tag":479,"props":1795,"children":1796},{"style":502},[1797],{"type":65,"value":1710},{"type":60,"tag":479,"props":1799,"children":1800},{"style":502},[1801],{"type":65,"value":1026},{"type":60,"tag":479,"props":1803,"children":1804},{"style":699},[1805],{"type":65,"value":1806}," userAgent",{"type":60,"tag":479,"props":1808,"children":1809},{"style":502},[1810],{"type":65,"value":1015},{"type":60,"tag":479,"props":1812,"children":1813},{"style":508},[1814],{"type":65,"value":1815}," navigator",{"type":60,"tag":479,"props":1817,"children":1818},{"style":502},[1819],{"type":65,"value":582},{"type":60,"tag":479,"props":1821,"children":1822},{"style":508},[1823],{"type":65,"value":1824},"userAgent ",{"type":60,"tag":479,"props":1826,"children":1827},{"style":502},[1828],{"type":65,"value":711},{"type":60,"tag":479,"props":1830,"children":1831},{"style":508},[1832],{"type":65,"value":1745},{"type":60,"tag":170,"props":1834,"children":1836},{"id":1835},"import-protection-file-markers",[1837],{"type":65,"value":1838},"Import Protection: File Markers",{"type":60,"tag":74,"props":1840,"children":1841},{},[1842],{"type":60,"tag":68,"props":1843,"children":1844},{},[1845],{"type":65,"value":1846},"Experimental.",{"type":60,"tag":68,"props":1848,"children":1849},{},[1850,1852,1858,1860,1866,1868,1874],{"type":65,"value":1851},"The ",{"type":60,"tag":89,"props":1853,"children":1855},{"className":1854},[],[1856],{"type":65,"value":1857},".server.*",{"type":65,"value":1859}," and ",{"type":60,"tag":89,"props":1861,"children":1863},{"className":1862},[],[1864],{"type":65,"value":1865},".client.*",{"type":65,"value":1867}," filename suffixes (e.g. ",{"type":60,"tag":89,"props":1869,"children":1871},{"className":1870},[],[1872],{"type":65,"value":1873},"db.server.ts",{"type":65,"value":1875},") opt a file into Start's import protection — it can't be imported from the wrong environment. When you can't or don't want to rename the file, add a side-effect import at the top of the file to apply the same protection by marker:",{"type":60,"tag":468,"props":1877,"children":1881},{"className":1878,"code":1879,"language":1880,"meta":473,"style":473},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F src\u002Flib\u002Fsecrets.ts (filename can't be *.server.ts)\nimport '@tanstack\u002Freact-start\u002Fserver-only'\n\u002F\u002F (or @tanstack\u002Fsolid-start\u002Fserver-only, @tanstack\u002Fvue-start\u002Fserver-only)\n\nexport function getApiKey() {\n  return process.env.API_KEY\n}\n","ts",[1882],{"type":60,"tag":89,"props":1883,"children":1884},{"__ignoreMap":473},[1885,1893,1913,1921,1928,1954,1982],{"type":60,"tag":479,"props":1886,"children":1887},{"class":481,"line":482},[1888],{"type":60,"tag":479,"props":1889,"children":1890},{"style":486},[1891],{"type":65,"value":1892},"\u002F\u002F src\u002Flib\u002Fsecrets.ts (filename can't be *.server.ts)\n",{"type":60,"tag":479,"props":1894,"children":1895},{"class":481,"line":492},[1896,1900,1904,1909],{"type":60,"tag":479,"props":1897,"children":1898},{"style":496},[1899],{"type":65,"value":499},{"type":60,"tag":479,"props":1901,"children":1902},{"style":502},[1903],{"type":65,"value":526},{"type":60,"tag":479,"props":1905,"children":1906},{"style":529},[1907],{"type":65,"value":1908},"@tanstack\u002Freact-start\u002Fserver-only",{"type":60,"tag":479,"props":1910,"children":1911},{"style":502},[1912],{"type":65,"value":537},{"type":60,"tag":479,"props":1914,"children":1915},{"class":481,"line":540},[1916],{"type":60,"tag":479,"props":1917,"children":1918},{"style":486},[1919],{"type":65,"value":1920},"\u002F\u002F (or @tanstack\u002Fsolid-start\u002Fserver-only, @tanstack\u002Fvue-start\u002Fserver-only)\n",{"type":60,"tag":479,"props":1922,"children":1923},{"class":481,"line":550},[1924],{"type":60,"tag":479,"props":1925,"children":1926},{"emptyLinePlaceholder":544},[1927],{"type":65,"value":547},{"type":60,"tag":479,"props":1929,"children":1930},{"class":481,"line":615},[1931,1936,1941,1946,1950],{"type":60,"tag":479,"props":1932,"children":1933},{"style":496},[1934],{"type":65,"value":1935},"export",{"type":60,"tag":479,"props":1937,"children":1938},{"style":554},[1939],{"type":65,"value":1940}," function",{"type":60,"tag":479,"props":1942,"children":1943},{"style":570},[1944],{"type":65,"value":1945}," getApiKey",{"type":60,"tag":479,"props":1947,"children":1948},{"style":502},[1949],{"type":65,"value":577},{"type":60,"tag":479,"props":1951,"children":1952},{"style":502},[1953],{"type":65,"value":612},{"type":60,"tag":479,"props":1955,"children":1956},{"class":481,"line":662},[1957,1961,1965,1969,1973,1977],{"type":60,"tag":479,"props":1958,"children":1959},{"style":496},[1960],{"type":65,"value":668},{"type":60,"tag":479,"props":1962,"children":1963},{"style":508},[1964],{"type":65,"value":636},{"type":60,"tag":479,"props":1966,"children":1967},{"style":502},[1968],{"type":65,"value":582},{"type":60,"tag":479,"props":1970,"children":1971},{"style":508},[1972],{"type":65,"value":645},{"type":60,"tag":479,"props":1974,"children":1975},{"style":502},[1976],{"type":65,"value":582},{"type":60,"tag":479,"props":1978,"children":1979},{"style":508},[1980],{"type":65,"value":1981},"API_KEY\n",{"type":60,"tag":479,"props":1983,"children":1984},{"class":481,"line":705},[1985],{"type":60,"tag":479,"props":1986,"children":1987},{"style":502},[1988],{"type":65,"value":1272},{"type":60,"tag":468,"props":1990,"children":1992},{"className":1878,"code":1991,"language":1880,"meta":473,"style":473},"\u002F\u002F src\u002Flib\u002Fstorage.ts\nimport '@tanstack\u002Freact-start\u002Fclient-only'\n\u002F\u002F (or @tanstack\u002Fsolid-start\u002Fclient-only, @tanstack\u002Fvue-start\u002Fclient-only)\n\nexport function savePreferences(prefs: Record\u003Cstring, string>) {\n  localStorage.setItem('prefs', JSON.stringify(prefs))\n}\n",[1993],{"type":60,"tag":89,"props":1994,"children":1995},{"__ignoreMap":473},[1996,2004,2024,2032,2039,2100,2161],{"type":60,"tag":479,"props":1997,"children":1998},{"class":481,"line":482},[1999],{"type":60,"tag":479,"props":2000,"children":2001},{"style":486},[2002],{"type":65,"value":2003},"\u002F\u002F src\u002Flib\u002Fstorage.ts\n",{"type":60,"tag":479,"props":2005,"children":2006},{"class":481,"line":492},[2007,2011,2015,2020],{"type":60,"tag":479,"props":2008,"children":2009},{"style":496},[2010],{"type":65,"value":499},{"type":60,"tag":479,"props":2012,"children":2013},{"style":502},[2014],{"type":65,"value":526},{"type":60,"tag":479,"props":2016,"children":2017},{"style":529},[2018],{"type":65,"value":2019},"@tanstack\u002Freact-start\u002Fclient-only",{"type":60,"tag":479,"props":2021,"children":2022},{"style":502},[2023],{"type":65,"value":537},{"type":60,"tag":479,"props":2025,"children":2026},{"class":481,"line":540},[2027],{"type":60,"tag":479,"props":2028,"children":2029},{"style":486},[2030],{"type":65,"value":2031},"\u002F\u002F (or @tanstack\u002Fsolid-start\u002Fclient-only, @tanstack\u002Fvue-start\u002Fclient-only)\n",{"type":60,"tag":479,"props":2033,"children":2034},{"class":481,"line":550},[2035],{"type":60,"tag":479,"props":2036,"children":2037},{"emptyLinePlaceholder":544},[2038],{"type":65,"value":547},{"type":60,"tag":479,"props":2040,"children":2041},{"class":481,"line":615},[2042,2046,2050,2055,2059,2064,2068,2073,2078,2083,2087,2091,2096],{"type":60,"tag":479,"props":2043,"children":2044},{"style":496},[2045],{"type":65,"value":1935},{"type":60,"tag":479,"props":2047,"children":2048},{"style":554},[2049],{"type":65,"value":1940},{"type":60,"tag":479,"props":2051,"children":2052},{"style":570},[2053],{"type":65,"value":2054}," savePreferences",{"type":60,"tag":479,"props":2056,"children":2057},{"style":502},[2058],{"type":65,"value":592},{"type":60,"tag":479,"props":2060,"children":2061},{"style":1007},[2062],{"type":65,"value":2063},"prefs",{"type":60,"tag":479,"props":2065,"children":2066},{"style":502},[2067],{"type":65,"value":1015},{"type":60,"tag":479,"props":2069,"children":2070},{"style":1018},[2071],{"type":65,"value":2072}," Record",{"type":60,"tag":479,"props":2074,"children":2075},{"style":502},[2076],{"type":65,"value":2077},"\u003C",{"type":60,"tag":479,"props":2079,"children":2080},{"style":1018},[2081],{"type":65,"value":2082},"string",{"type":60,"tag":479,"props":2084,"children":2085},{"style":502},[2086],{"type":65,"value":1026},{"type":60,"tag":479,"props":2088,"children":2089},{"style":1018},[2090],{"type":65,"value":1021},{"type":60,"tag":479,"props":2092,"children":2093},{"style":502},[2094],{"type":65,"value":2095},">)",{"type":60,"tag":479,"props":2097,"children":2098},{"style":502},[2099],{"type":65,"value":612},{"type":60,"tag":479,"props":2101,"children":2102},{"class":481,"line":662},[2103,2107,2111,2115,2119,2123,2127,2131,2135,2140,2144,2149,2153,2157],{"type":60,"tag":479,"props":2104,"children":2105},{"style":508},[2106],{"type":65,"value":1060},{"type":60,"tag":479,"props":2108,"children":2109},{"style":502},[2110],{"type":65,"value":582},{"type":60,"tag":479,"props":2112,"children":2113},{"style":570},[2114],{"type":65,"value":1069},{"type":60,"tag":479,"props":2116,"children":2117},{"style":699},[2118],{"type":65,"value":592},{"type":60,"tag":479,"props":2120,"children":2121},{"style":502},[2122],{"type":65,"value":1710},{"type":60,"tag":479,"props":2124,"children":2125},{"style":529},[2126],{"type":65,"value":2063},{"type":60,"tag":479,"props":2128,"children":2129},{"style":502},[2130],{"type":65,"value":1710},{"type":60,"tag":479,"props":2132,"children":2133},{"style":502},[2134],{"type":65,"value":1026},{"type":60,"tag":479,"props":2136,"children":2137},{"style":508},[2138],{"type":65,"value":2139}," JSON",{"type":60,"tag":479,"props":2141,"children":2142},{"style":502},[2143],{"type":65,"value":582},{"type":60,"tag":479,"props":2145,"children":2146},{"style":570},[2147],{"type":65,"value":2148},"stringify",{"type":60,"tag":479,"props":2150,"children":2151},{"style":699},[2152],{"type":65,"value":592},{"type":60,"tag":479,"props":2154,"children":2155},{"style":508},[2156],{"type":65,"value":2063},{"type":60,"tag":479,"props":2158,"children":2159},{"style":699},[2160],{"type":65,"value":1745},{"type":60,"tag":479,"props":2162,"children":2163},{"class":481,"line":705},[2164],{"type":60,"tag":479,"props":2165,"children":2166},{"style":502},[2167],{"type":65,"value":1272},{"type":60,"tag":68,"props":2169,"children":2170},{},[2171],{"type":65,"value":2172},"Rules:",{"type":60,"tag":2174,"props":2175,"children":2176},"ul",{},[2177,2183,2188],{"type":60,"tag":2178,"props":2179,"children":2180},"li",{},[2181],{"type":65,"value":2182},"Both markers in the same file is an error.",{"type":60,"tag":2178,"props":2184,"children":2185},{},[2186],{"type":65,"value":2187},"Type-only imports are ignored (they erase to nothing at runtime).",{"type":60,"tag":2178,"props":2189,"children":2190},{},[2191,2193,2199,2201,2207],{"type":65,"value":2192},"Default behavior is ",{"type":60,"tag":89,"props":2194,"children":2196},{"className":2195},[],[2197],{"type":65,"value":2198},"error",{"type":65,"value":2200}," in production builds and ",{"type":60,"tag":89,"props":2202,"children":2204},{"className":2203},[],[2205],{"type":65,"value":2206},"mock",{"type":65,"value":2208}," in dev. The mock returns a recursive Proxy so dev keeps running while you fix the import graph.",{"type":60,"tag":68,"props":2210,"children":2211},{},[2212],{"type":65,"value":2213},"Pick the right tool:",{"type":60,"tag":2174,"props":2215,"children":2216},{},[2217,2243,2255,2274],{"type":60,"tag":2178,"props":2218,"children":2219},{},[2220,2222,2227,2229,2235,2237,2242],{"type":65,"value":2221},"File should never run on the wrong side ",{"type":60,"tag":81,"props":2223,"children":2224},{},[2225],{"type":65,"value":2226},"and",{"type":65,"value":2228}," has no client API → ",{"type":60,"tag":89,"props":2230,"children":2232},{"className":2231},[],[2233],{"type":65,"value":2234},"*.server.ts",{"type":65,"value":2236}," filename or ",{"type":60,"tag":89,"props":2238,"children":2240},{"className":2239},[],[2241],{"type":65,"value":408},{"type":65,"value":582},{"type":60,"tag":2178,"props":2244,"children":2245},{},[2246,2248,2254],{"type":65,"value":2247},"One symbol needs to behave differently per environment → ",{"type":60,"tag":89,"props":2249,"children":2251},{"className":2250},[],[2252],{"type":65,"value":2253},"createIsomorphicFn().client(...).server(...)",{"type":65,"value":582},{"type":60,"tag":2178,"props":2256,"children":2257},{},[2258,2260,2266,2268,2273],{"type":65,"value":2259},"One function should error if called from the wrong side → ",{"type":60,"tag":89,"props":2261,"children":2263},{"className":2262},[],[2264],{"type":65,"value":2265},"createServerOnlyFn",{"type":65,"value":2267}," \u002F ",{"type":60,"tag":89,"props":2269,"children":2271},{"className":2270},[],[2272],{"type":65,"value":919},{"type":65,"value":582},{"type":60,"tag":2178,"props":2275,"children":2276},{},[2277,2279,2284,2286,2291],{"type":65,"value":2278},"Component renders only after hydration → ",{"type":60,"tag":89,"props":2280,"children":2282},{"className":2281},[],[2283],{"type":65,"value":344},{"type":65,"value":2285}," or ",{"type":60,"tag":89,"props":2287,"children":2289},{"className":2288},[],[2290],{"type":65,"value":371},{"type":65,"value":582},{"type":60,"tag":170,"props":2293,"children":2295},{"id":2294},"environment-variables",[2296],{"type":65,"value":2297},"Environment Variables",{"type":60,"tag":456,"props":2299,"children":2301},{"id":2300},"server-side-inside-createserverfn",[2302],{"type":65,"value":2303},"Server-Side (inside createServerFn)",{"type":60,"tag":68,"props":2305,"children":2306},{},[2307,2309,2314],{"type":65,"value":2308},"Access any variable via ",{"type":60,"tag":89,"props":2310,"children":2312},{"className":2311},[],[2313],{"type":65,"value":108},{"type":65,"value":1015},{"type":60,"tag":468,"props":2316,"children":2318},{"className":470,"code":2317,"language":472,"meta":473,"style":473},"const connectDb = createServerFn().handler(async () => {\n  const url = process.env.DATABASE_URL \u002F\u002F no prefix needed\n  return createConnection(url)\n})\n",[2319],{"type":60,"tag":89,"props":2320,"children":2321},{"__ignoreMap":473},[2322,2374,2416,2440],{"type":60,"tag":479,"props":2323,"children":2324},{"class":481,"line":482},[2325,2329,2334,2338,2342,2346,2350,2354,2358,2362,2366,2370],{"type":60,"tag":479,"props":2326,"children":2327},{"style":554},[2328],{"type":65,"value":557},{"type":60,"tag":479,"props":2330,"children":2331},{"style":508},[2332],{"type":65,"value":2333}," connectDb ",{"type":60,"tag":479,"props":2335,"children":2336},{"style":502},[2337],{"type":65,"value":567},{"type":60,"tag":479,"props":2339,"children":2340},{"style":570},[2341],{"type":65,"value":511},{"type":60,"tag":479,"props":2343,"children":2344},{"style":508},[2345],{"type":65,"value":577},{"type":60,"tag":479,"props":2347,"children":2348},{"style":502},[2349],{"type":65,"value":582},{"type":60,"tag":479,"props":2351,"children":2352},{"style":570},[2353],{"type":65,"value":587},{"type":60,"tag":479,"props":2355,"children":2356},{"style":508},[2357],{"type":65,"value":592},{"type":60,"tag":479,"props":2359,"children":2360},{"style":554},[2361],{"type":65,"value":597},{"type":60,"tag":479,"props":2363,"children":2364},{"style":502},[2365],{"type":65,"value":602},{"type":60,"tag":479,"props":2367,"children":2368},{"style":554},[2369],{"type":65,"value":607},{"type":60,"tag":479,"props":2371,"children":2372},{"style":502},[2373],{"type":65,"value":612},{"type":60,"tag":479,"props":2375,"children":2376},{"class":481,"line":492},[2377,2381,2386,2390,2394,2398,2402,2406,2411],{"type":60,"tag":479,"props":2378,"children":2379},{"style":554},[2380],{"type":65,"value":621},{"type":60,"tag":479,"props":2382,"children":2383},{"style":508},[2384],{"type":65,"value":2385}," url",{"type":60,"tag":479,"props":2387,"children":2388},{"style":502},[2389],{"type":65,"value":631},{"type":60,"tag":479,"props":2391,"children":2392},{"style":508},[2393],{"type":65,"value":636},{"type":60,"tag":479,"props":2395,"children":2396},{"style":502},[2397],{"type":65,"value":582},{"type":60,"tag":479,"props":2399,"children":2400},{"style":508},[2401],{"type":65,"value":645},{"type":60,"tag":479,"props":2403,"children":2404},{"style":502},[2405],{"type":65,"value":582},{"type":60,"tag":479,"props":2407,"children":2408},{"style":508},[2409],{"type":65,"value":2410},"DATABASE_URL",{"type":60,"tag":479,"props":2412,"children":2413},{"style":486},[2414],{"type":65,"value":2415}," \u002F\u002F no prefix needed\n",{"type":60,"tag":479,"props":2417,"children":2418},{"class":481,"line":540},[2419,2423,2428,2432,2436],{"type":60,"tag":479,"props":2420,"children":2421},{"style":496},[2422],{"type":65,"value":668},{"type":60,"tag":479,"props":2424,"children":2425},{"style":570},[2426],{"type":65,"value":2427}," createConnection",{"type":60,"tag":479,"props":2429,"children":2430},{"style":699},[2431],{"type":65,"value":592},{"type":60,"tag":479,"props":2433,"children":2434},{"style":508},[2435],{"type":65,"value":38},{"type":60,"tag":479,"props":2437,"children":2438},{"style":699},[2439],{"type":65,"value":716},{"type":60,"tag":479,"props":2441,"children":2442},{"class":481,"line":550},[2443,2447],{"type":60,"tag":479,"props":2444,"children":2445},{"style":502},[2446],{"type":65,"value":711},{"type":60,"tag":479,"props":2448,"children":2449},{"style":508},[2450],{"type":65,"value":716},{"type":60,"tag":456,"props":2452,"children":2454},{"id":2453},"client-side-components",[2455],{"type":65,"value":2456},"Client-Side (components)",{"type":60,"tag":68,"props":2458,"children":2459},{},[2460,2462,2467],{"type":65,"value":2461},"Only ",{"type":60,"tag":89,"props":2463,"children":2465},{"className":2464},[],[2466],{"type":65,"value":145},{"type":65,"value":2468}," prefixed variables are available:",{"type":60,"tag":468,"props":2470,"children":2472},{"className":470,"code":2471,"language":472,"meta":473,"style":473},"\u002F\u002F Framework-specific component type (React.ReactNode, JSX.Element, etc.)\nfunction ApiProvider({ children }: { children: React.ReactNode }) {\n  const apiUrl = import.meta.env.VITE_API_URL \u002F\u002F available\n  \u002F\u002F import.meta.env.DATABASE_URL → undefined (security)\n  return (\n    \u003CApiContext.Provider value={{ apiUrl }}>{children}\u003C\u002FApiContext.Provider>\n  )\n}\n",[2473],{"type":60,"tag":89,"props":2474,"children":2475},{"__ignoreMap":473},[2476,2484,2546,2598,2606,2617,2665,2672],{"type":60,"tag":479,"props":2477,"children":2478},{"class":481,"line":482},[2479],{"type":60,"tag":479,"props":2480,"children":2481},{"style":486},[2482],{"type":65,"value":2483},"\u002F\u002F Framework-specific component type (React.ReactNode, JSX.Element, etc.)\n",{"type":60,"tag":479,"props":2485,"children":2486},{"class":481,"line":492},[2487,2491,2496,2501,2506,2511,2515,2519,2523,2528,2532,2537,2542],{"type":60,"tag":479,"props":2488,"children":2489},{"style":554},[2490],{"type":65,"value":1173},{"type":60,"tag":479,"props":2492,"children":2493},{"style":570},[2494],{"type":65,"value":2495}," ApiProvider",{"type":60,"tag":479,"props":2497,"children":2498},{"style":502},[2499],{"type":65,"value":2500},"({",{"type":60,"tag":479,"props":2502,"children":2503},{"style":1007},[2504],{"type":65,"value":2505}," children",{"type":60,"tag":479,"props":2507,"children":2508},{"style":502},[2509],{"type":65,"value":2510}," }:",{"type":60,"tag":479,"props":2512,"children":2513},{"style":502},[2514],{"type":65,"value":505},{"type":60,"tag":479,"props":2516,"children":2517},{"style":699},[2518],{"type":65,"value":2505},{"type":60,"tag":479,"props":2520,"children":2521},{"style":502},[2522],{"type":65,"value":1015},{"type":60,"tag":479,"props":2524,"children":2525},{"style":1018},[2526],{"type":65,"value":2527}," React",{"type":60,"tag":479,"props":2529,"children":2530},{"style":502},[2531],{"type":65,"value":582},{"type":60,"tag":479,"props":2533,"children":2534},{"style":1018},[2535],{"type":65,"value":2536},"ReactNode",{"type":60,"tag":479,"props":2538,"children":2539},{"style":502},[2540],{"type":65,"value":2541}," })",{"type":60,"tag":479,"props":2543,"children":2544},{"style":502},[2545],{"type":65,"value":612},{"type":60,"tag":479,"props":2547,"children":2548},{"class":481,"line":540},[2549,2553,2558,2562,2567,2571,2576,2580,2584,2588,2593],{"type":60,"tag":479,"props":2550,"children":2551},{"style":554},[2552],{"type":65,"value":621},{"type":60,"tag":479,"props":2554,"children":2555},{"style":508},[2556],{"type":65,"value":2557}," apiUrl",{"type":60,"tag":479,"props":2559,"children":2560},{"style":502},[2561],{"type":65,"value":631},{"type":60,"tag":479,"props":2563,"children":2564},{"style":496},[2565],{"type":65,"value":2566}," import",{"type":60,"tag":479,"props":2568,"children":2569},{"style":502},[2570],{"type":65,"value":582},{"type":60,"tag":479,"props":2572,"children":2573},{"style":508},[2574],{"type":65,"value":2575},"meta",{"type":60,"tag":479,"props":2577,"children":2578},{"style":502},[2579],{"type":65,"value":582},{"type":60,"tag":479,"props":2581,"children":2582},{"style":508},[2583],{"type":65,"value":645},{"type":60,"tag":479,"props":2585,"children":2586},{"style":502},[2587],{"type":65,"value":582},{"type":60,"tag":479,"props":2589,"children":2590},{"style":508},[2591],{"type":65,"value":2592},"VITE_API_URL",{"type":60,"tag":479,"props":2594,"children":2595},{"style":486},[2596],{"type":65,"value":2597}," \u002F\u002F available\n",{"type":60,"tag":479,"props":2599,"children":2600},{"class":481,"line":550},[2601],{"type":60,"tag":479,"props":2602,"children":2603},{"style":486},[2604],{"type":65,"value":2605},"  \u002F\u002F import.meta.env.DATABASE_URL → undefined (security)\n",{"type":60,"tag":479,"props":2607,"children":2608},{"class":481,"line":615},[2609,2613],{"type":60,"tag":479,"props":2610,"children":2611},{"style":496},[2612],{"type":65,"value":668},{"type":60,"tag":479,"props":2614,"children":2615},{"style":699},[2616],{"type":65,"value":1198},{"type":60,"tag":479,"props":2618,"children":2619},{"class":481,"line":662},[2620,2624,2629,2633,2638,2643,2648,2653,2657,2661],{"type":60,"tag":479,"props":2621,"children":2622},{"style":502},[2623],{"type":65,"value":1206},{"type":60,"tag":479,"props":2625,"children":2626},{"style":1018},[2627],{"type":65,"value":2628},"ApiContext.Provider",{"type":60,"tag":479,"props":2630,"children":2631},{"style":554},[2632],{"type":65,"value":1031},{"type":60,"tag":479,"props":2634,"children":2635},{"style":502},[2636],{"type":65,"value":2637},"={{",{"type":60,"tag":479,"props":2639,"children":2640},{"style":508},[2641],{"type":65,"value":2642}," apiUrl ",{"type":60,"tag":479,"props":2644,"children":2645},{"style":502},[2646],{"type":65,"value":2647},"}}>{",{"type":60,"tag":479,"props":2649,"children":2650},{"style":508},[2651],{"type":65,"value":2652},"children",{"type":60,"tag":479,"props":2654,"children":2655},{"style":502},[2656],{"type":65,"value":1518},{"type":60,"tag":479,"props":2658,"children":2659},{"style":1018},[2660],{"type":65,"value":2628},{"type":60,"tag":479,"props":2662,"children":2663},{"style":502},[2664],{"type":65,"value":1256},{"type":60,"tag":479,"props":2666,"children":2667},{"class":481,"line":705},[2668],{"type":60,"tag":479,"props":2669,"children":2670},{"style":699},[2671],{"type":65,"value":1264},{"type":60,"tag":479,"props":2673,"children":2674},{"class":481,"line":719},[2675],{"type":60,"tag":479,"props":2676,"children":2677},{"style":502},[2678],{"type":65,"value":1272},{"type":60,"tag":456,"props":2680,"children":2682},{"id":2681},"runtime-client-variables",[2683],{"type":65,"value":2684},"Runtime Client Variables",{"type":60,"tag":68,"props":2686,"children":2687},{},[2688,2690,2695],{"type":65,"value":2689},"If you need server-side variables on the client without ",{"type":60,"tag":89,"props":2691,"children":2693},{"className":2692},[],[2694],{"type":65,"value":145},{"type":65,"value":2696}," prefix, pass them through a server function:",{"type":60,"tag":468,"props":2698,"children":2700},{"className":470,"code":2699,"language":472,"meta":473,"style":473},"const getRuntimeVar = createServerFn({ method: 'GET' }).handler(() => {\n  return process.env.MY_RUNTIME_VAR\n})\n\nexport const Route = createFileRoute('\u002F')({\n  loader: async () => {\n    const foo = await getRuntimeVar()\n    return { foo }\n  },\n  component: () => {\n    const { foo } = Route.useLoaderData()\n    return \u003Cdiv>{foo}\u003C\u002Fdiv>\n  },\n})\n",[2701],{"type":60,"tag":89,"props":2702,"children":2703},{"__ignoreMap":473},[2704,2786,2814,2825,2832,2885,2914,2944,2965,2973,2997,3038,3076,3084],{"type":60,"tag":479,"props":2705,"children":2706},{"class":481,"line":482},[2707,2711,2716,2720,2724,2728,2732,2737,2741,2745,2750,2754,2758,2762,2766,2770,2774,2778,2782],{"type":60,"tag":479,"props":2708,"children":2709},{"style":554},[2710],{"type":65,"value":557},{"type":60,"tag":479,"props":2712,"children":2713},{"style":508},[2714],{"type":65,"value":2715}," getRuntimeVar ",{"type":60,"tag":479,"props":2717,"children":2718},{"style":502},[2719],{"type":65,"value":567},{"type":60,"tag":479,"props":2721,"children":2722},{"style":570},[2723],{"type":65,"value":511},{"type":60,"tag":479,"props":2725,"children":2726},{"style":508},[2727],{"type":65,"value":592},{"type":60,"tag":479,"props":2729,"children":2730},{"style":502},[2731],{"type":65,"value":1508},{"type":60,"tag":479,"props":2733,"children":2734},{"style":699},[2735],{"type":65,"value":2736}," method",{"type":60,"tag":479,"props":2738,"children":2739},{"style":502},[2740],{"type":65,"value":1015},{"type":60,"tag":479,"props":2742,"children":2743},{"style":502},[2744],{"type":65,"value":526},{"type":60,"tag":479,"props":2746,"children":2747},{"style":529},[2748],{"type":65,"value":2749},"GET",{"type":60,"tag":479,"props":2751,"children":2752},{"style":502},[2753],{"type":65,"value":1710},{"type":60,"tag":479,"props":2755,"children":2756},{"style":502},[2757],{"type":65,"value":516},{"type":60,"tag":479,"props":2759,"children":2760},{"style":508},[2761],{"type":65,"value":1044},{"type":60,"tag":479,"props":2763,"children":2764},{"style":502},[2765],{"type":65,"value":582},{"type":60,"tag":479,"props":2767,"children":2768},{"style":570},[2769],{"type":65,"value":587},{"type":60,"tag":479,"props":2771,"children":2772},{"style":508},[2773],{"type":65,"value":592},{"type":60,"tag":479,"props":2775,"children":2776},{"style":502},[2777],{"type":65,"value":577},{"type":60,"tag":479,"props":2779,"children":2780},{"style":554},[2781],{"type":65,"value":607},{"type":60,"tag":479,"props":2783,"children":2784},{"style":502},[2785],{"type":65,"value":612},{"type":60,"tag":479,"props":2787,"children":2788},{"class":481,"line":492},[2789,2793,2797,2801,2805,2809],{"type":60,"tag":479,"props":2790,"children":2791},{"style":496},[2792],{"type":65,"value":668},{"type":60,"tag":479,"props":2794,"children":2795},{"style":508},[2796],{"type":65,"value":636},{"type":60,"tag":479,"props":2798,"children":2799},{"style":502},[2800],{"type":65,"value":582},{"type":60,"tag":479,"props":2802,"children":2803},{"style":508},[2804],{"type":65,"value":645},{"type":60,"tag":479,"props":2806,"children":2807},{"style":502},[2808],{"type":65,"value":582},{"type":60,"tag":479,"props":2810,"children":2811},{"style":508},[2812],{"type":65,"value":2813},"MY_RUNTIME_VAR\n",{"type":60,"tag":479,"props":2815,"children":2816},{"class":481,"line":540},[2817,2821],{"type":60,"tag":479,"props":2818,"children":2819},{"style":502},[2820],{"type":65,"value":711},{"type":60,"tag":479,"props":2822,"children":2823},{"style":508},[2824],{"type":65,"value":716},{"type":60,"tag":479,"props":2826,"children":2827},{"class":481,"line":550},[2828],{"type":60,"tag":479,"props":2829,"children":2830},{"emptyLinePlaceholder":544},[2831],{"type":65,"value":547},{"type":60,"tag":479,"props":2833,"children":2834},{"class":481,"line":615},[2835,2839,2844,2849,2853,2858,2862,2866,2871,2875,2880],{"type":60,"tag":479,"props":2836,"children":2837},{"style":496},[2838],{"type":65,"value":1935},{"type":60,"tag":479,"props":2840,"children":2841},{"style":554},[2842],{"type":65,"value":2843}," const",{"type":60,"tag":479,"props":2845,"children":2846},{"style":508},[2847],{"type":65,"value":2848}," Route ",{"type":60,"tag":479,"props":2850,"children":2851},{"style":502},[2852],{"type":65,"value":567},{"type":60,"tag":479,"props":2854,"children":2855},{"style":570},[2856],{"type":65,"value":2857}," createFileRoute",{"type":60,"tag":479,"props":2859,"children":2860},{"style":508},[2861],{"type":65,"value":592},{"type":60,"tag":479,"props":2863,"children":2864},{"style":502},[2865],{"type":65,"value":1710},{"type":60,"tag":479,"props":2867,"children":2868},{"style":529},[2869],{"type":65,"value":2870},"\u002F",{"type":60,"tag":479,"props":2872,"children":2873},{"style":502},[2874],{"type":65,"value":1710},{"type":60,"tag":479,"props":2876,"children":2877},{"style":508},[2878],{"type":65,"value":2879},")(",{"type":60,"tag":479,"props":2881,"children":2882},{"style":502},[2883],{"type":65,"value":2884},"{\n",{"type":60,"tag":479,"props":2886,"children":2887},{"class":481,"line":662},[2888,2893,2897,2902,2906,2910],{"type":60,"tag":479,"props":2889,"children":2890},{"style":570},[2891],{"type":65,"value":2892},"  loader",{"type":60,"tag":479,"props":2894,"children":2895},{"style":502},[2896],{"type":65,"value":1015},{"type":60,"tag":479,"props":2898,"children":2899},{"style":554},[2900],{"type":65,"value":2901}," async",{"type":60,"tag":479,"props":2903,"children":2904},{"style":502},[2905],{"type":65,"value":602},{"type":60,"tag":479,"props":2907,"children":2908},{"style":554},[2909],{"type":65,"value":607},{"type":60,"tag":479,"props":2911,"children":2912},{"style":502},[2913],{"type":65,"value":612},{"type":60,"tag":479,"props":2915,"children":2916},{"class":481,"line":705},[2917,2922,2927,2931,2935,2940],{"type":60,"tag":479,"props":2918,"children":2919},{"style":554},[2920],{"type":65,"value":2921},"    const",{"type":60,"tag":479,"props":2923,"children":2924},{"style":508},[2925],{"type":65,"value":2926}," foo",{"type":60,"tag":479,"props":2928,"children":2929},{"style":502},[2930],{"type":65,"value":631},{"type":60,"tag":479,"props":2932,"children":2933},{"style":496},[2934],{"type":65,"value":673},{"type":60,"tag":479,"props":2936,"children":2937},{"style":570},[2938],{"type":65,"value":2939}," getRuntimeVar",{"type":60,"tag":479,"props":2941,"children":2942},{"style":699},[2943],{"type":65,"value":702},{"type":60,"tag":479,"props":2945,"children":2946},{"class":481,"line":719},[2947,2952,2956,2960],{"type":60,"tag":479,"props":2948,"children":2949},{"style":496},[2950],{"type":65,"value":2951},"    return",{"type":60,"tag":479,"props":2953,"children":2954},{"style":502},[2955],{"type":65,"value":505},{"type":60,"tag":479,"props":2957,"children":2958},{"style":508},[2959],{"type":65,"value":2926},{"type":60,"tag":479,"props":2961,"children":2962},{"style":502},[2963],{"type":65,"value":2964}," }\n",{"type":60,"tag":479,"props":2966,"children":2967},{"class":481,"line":727},[2968],{"type":60,"tag":479,"props":2969,"children":2970},{"style":502},[2971],{"type":65,"value":2972},"  },\n",{"type":60,"tag":479,"props":2974,"children":2975},{"class":481,"line":736},[2976,2981,2985,2989,2993],{"type":60,"tag":479,"props":2977,"children":2978},{"style":570},[2979],{"type":65,"value":2980},"  component",{"type":60,"tag":479,"props":2982,"children":2983},{"style":502},[2984],{"type":65,"value":1015},{"type":60,"tag":479,"props":2986,"children":2987},{"style":502},[2988],{"type":65,"value":602},{"type":60,"tag":479,"props":2990,"children":2991},{"style":554},[2992],{"type":65,"value":607},{"type":60,"tag":479,"props":2994,"children":2995},{"style":502},[2996],{"type":65,"value":612},{"type":60,"tag":479,"props":2998,"children":2999},{"class":481,"line":1529},[3000,3004,3008,3012,3016,3020,3025,3029,3034],{"type":60,"tag":479,"props":3001,"children":3002},{"style":554},[3003],{"type":65,"value":2921},{"type":60,"tag":479,"props":3005,"children":3006},{"style":502},[3007],{"type":65,"value":505},{"type":60,"tag":479,"props":3009,"children":3010},{"style":508},[3011],{"type":65,"value":2926},{"type":60,"tag":479,"props":3013,"children":3014},{"style":502},[3015],{"type":65,"value":516},{"type":60,"tag":479,"props":3017,"children":3018},{"style":502},[3019],{"type":65,"value":631},{"type":60,"tag":479,"props":3021,"children":3022},{"style":508},[3023],{"type":65,"value":3024}," Route",{"type":60,"tag":479,"props":3026,"children":3027},{"style":502},[3028],{"type":65,"value":582},{"type":60,"tag":479,"props":3030,"children":3031},{"style":570},[3032],{"type":65,"value":3033},"useLoaderData",{"type":60,"tag":479,"props":3035,"children":3036},{"style":699},[3037],{"type":65,"value":702},{"type":60,"tag":479,"props":3039,"children":3041},{"class":481,"line":3040},12,[3042,3046,3050,3054,3059,3064,3068,3072],{"type":60,"tag":479,"props":3043,"children":3044},{"style":496},[3045],{"type":65,"value":2951},{"type":60,"tag":479,"props":3047,"children":3048},{"style":502},[3049],{"type":65,"value":1488},{"type":60,"tag":479,"props":3051,"children":3052},{"style":699},[3053],{"type":65,"value":1493},{"type":60,"tag":479,"props":3055,"children":3056},{"style":502},[3057],{"type":65,"value":3058},">{",{"type":60,"tag":479,"props":3060,"children":3061},{"style":508},[3062],{"type":65,"value":3063},"foo",{"type":60,"tag":479,"props":3065,"children":3066},{"style":502},[3067],{"type":65,"value":1518},{"type":60,"tag":479,"props":3069,"children":3070},{"style":699},[3071],{"type":65,"value":1493},{"type":60,"tag":479,"props":3073,"children":3074},{"style":502},[3075],{"type":65,"value":1256},{"type":60,"tag":479,"props":3077,"children":3079},{"class":481,"line":3078},13,[3080],{"type":60,"tag":479,"props":3081,"children":3082},{"style":502},[3083],{"type":65,"value":2972},{"type":60,"tag":479,"props":3085,"children":3087},{"class":481,"line":3086},14,[3088,3092],{"type":60,"tag":479,"props":3089,"children":3090},{"style":502},[3091],{"type":65,"value":711},{"type":60,"tag":479,"props":3093,"children":3094},{"style":508},[3095],{"type":65,"value":716},{"type":60,"tag":456,"props":3097,"children":3099},{"id":3098},"type-safety-for-environment-variables",[3100],{"type":65,"value":3101},"Type Safety for Environment Variables",{"type":60,"tag":468,"props":3103,"children":3105},{"className":470,"code":3104,"language":472,"meta":473,"style":473},"\u002F\u002F src\u002Fenv.d.ts\n\u002F\u002F\u002F \u003Creference types=\"vite\u002Fclient\" \u002F>\n\ninterface ImportMetaEnv {\n  readonly VITE_APP_NAME: string\n  readonly VITE_API_URL: string\n}\n\ninterface ImportMeta {\n  readonly env: ImportMetaEnv\n}\n\ndeclare global {\n  namespace NodeJS {\n    interface ProcessEnv {\n      readonly DATABASE_URL: string\n      readonly JWT_SECRET: string\n    }\n  }\n}\n\nexport {}\n",[3106],{"type":60,"tag":89,"props":3107,"children":3108},{"__ignoreMap":473},[3109,3117,3164,3171,3188,3210,3230,3237,3244,3260,3281,3288,3295,3312,3329,3347,3369,3390,3399,3408,3416,3424],{"type":60,"tag":479,"props":3110,"children":3111},{"class":481,"line":482},[3112],{"type":60,"tag":479,"props":3113,"children":3114},{"style":486},[3115],{"type":65,"value":3116},"\u002F\u002F src\u002Fenv.d.ts\n",{"type":60,"tag":479,"props":3118,"children":3119},{"class":481,"line":492},[3120,3125,3129,3135,3141,3145,3150,3156,3160],{"type":60,"tag":479,"props":3121,"children":3122},{"style":486},[3123],{"type":65,"value":3124},"\u002F\u002F\u002F ",{"type":60,"tag":479,"props":3126,"children":3127},{"style":496},[3128],{"type":65,"value":2077},{"type":60,"tag":479,"props":3130,"children":3132},{"style":3131},"--shiki-light:#E53935;--shiki-light-font-style:italic;--shiki-default:#F07178;--shiki-default-font-style:italic;--shiki-dark:#F07178;--shiki-dark-font-style:italic",[3133],{"type":65,"value":3134},"reference",{"type":60,"tag":479,"props":3136,"children":3138},{"style":3137},"--shiki-light:#9C3EDA;--shiki-light-font-style:italic;--shiki-default:#C792EA;--shiki-default-font-style:italic;--shiki-dark:#C792EA;--shiki-dark-font-style:italic",[3139],{"type":65,"value":3140}," types",{"type":60,"tag":479,"props":3142,"children":3143},{"style":496},[3144],{"type":65,"value":567},{"type":60,"tag":479,"props":3146,"children":3147},{"style":496},[3148],{"type":65,"value":3149},"\"",{"type":60,"tag":479,"props":3151,"children":3153},{"style":3152},"--shiki-light:#91B859;--shiki-light-font-style:italic;--shiki-default:#C3E88D;--shiki-default-font-style:italic;--shiki-dark:#C3E88D;--shiki-dark-font-style:italic",[3154],{"type":65,"value":3155},"vite\u002Fclient",{"type":60,"tag":479,"props":3157,"children":3158},{"style":496},[3159],{"type":65,"value":3149},{"type":60,"tag":479,"props":3161,"children":3162},{"style":496},[3163],{"type":65,"value":1239},{"type":60,"tag":479,"props":3165,"children":3166},{"class":481,"line":540},[3167],{"type":60,"tag":479,"props":3168,"children":3169},{"emptyLinePlaceholder":544},[3170],{"type":65,"value":547},{"type":60,"tag":479,"props":3172,"children":3173},{"class":481,"line":550},[3174,3179,3184],{"type":60,"tag":479,"props":3175,"children":3176},{"style":554},[3177],{"type":65,"value":3178},"interface",{"type":60,"tag":479,"props":3180,"children":3181},{"style":1018},[3182],{"type":65,"value":3183}," ImportMetaEnv",{"type":60,"tag":479,"props":3185,"children":3186},{"style":502},[3187],{"type":65,"value":612},{"type":60,"tag":479,"props":3189,"children":3190},{"class":481,"line":615},[3191,3196,3201,3205],{"type":60,"tag":479,"props":3192,"children":3193},{"style":554},[3194],{"type":65,"value":3195},"  readonly",{"type":60,"tag":479,"props":3197,"children":3198},{"style":699},[3199],{"type":65,"value":3200}," VITE_APP_NAME",{"type":60,"tag":479,"props":3202,"children":3203},{"style":502},[3204],{"type":65,"value":1015},{"type":60,"tag":479,"props":3206,"children":3207},{"style":1018},[3208],{"type":65,"value":3209}," string\n",{"type":60,"tag":479,"props":3211,"children":3212},{"class":481,"line":662},[3213,3217,3222,3226],{"type":60,"tag":479,"props":3214,"children":3215},{"style":554},[3216],{"type":65,"value":3195},{"type":60,"tag":479,"props":3218,"children":3219},{"style":699},[3220],{"type":65,"value":3221}," VITE_API_URL",{"type":60,"tag":479,"props":3223,"children":3224},{"style":502},[3225],{"type":65,"value":1015},{"type":60,"tag":479,"props":3227,"children":3228},{"style":1018},[3229],{"type":65,"value":3209},{"type":60,"tag":479,"props":3231,"children":3232},{"class":481,"line":705},[3233],{"type":60,"tag":479,"props":3234,"children":3235},{"style":502},[3236],{"type":65,"value":1272},{"type":60,"tag":479,"props":3238,"children":3239},{"class":481,"line":719},[3240],{"type":60,"tag":479,"props":3241,"children":3242},{"emptyLinePlaceholder":544},[3243],{"type":65,"value":547},{"type":60,"tag":479,"props":3245,"children":3246},{"class":481,"line":727},[3247,3251,3256],{"type":60,"tag":479,"props":3248,"children":3249},{"style":554},[3250],{"type":65,"value":3178},{"type":60,"tag":479,"props":3252,"children":3253},{"style":1018},[3254],{"type":65,"value":3255}," ImportMeta",{"type":60,"tag":479,"props":3257,"children":3258},{"style":502},[3259],{"type":65,"value":612},{"type":60,"tag":479,"props":3261,"children":3262},{"class":481,"line":736},[3263,3267,3272,3276],{"type":60,"tag":479,"props":3264,"children":3265},{"style":554},[3266],{"type":65,"value":3195},{"type":60,"tag":479,"props":3268,"children":3269},{"style":699},[3270],{"type":65,"value":3271}," env",{"type":60,"tag":479,"props":3273,"children":3274},{"style":502},[3275],{"type":65,"value":1015},{"type":60,"tag":479,"props":3277,"children":3278},{"style":1018},[3279],{"type":65,"value":3280}," ImportMetaEnv\n",{"type":60,"tag":479,"props":3282,"children":3283},{"class":481,"line":1529},[3284],{"type":60,"tag":479,"props":3285,"children":3286},{"style":502},[3287],{"type":65,"value":1272},{"type":60,"tag":479,"props":3289,"children":3290},{"class":481,"line":3040},[3291],{"type":60,"tag":479,"props":3292,"children":3293},{"emptyLinePlaceholder":544},[3294],{"type":65,"value":547},{"type":60,"tag":479,"props":3296,"children":3297},{"class":481,"line":3078},[3298,3303,3308],{"type":60,"tag":479,"props":3299,"children":3300},{"style":554},[3301],{"type":65,"value":3302},"declare",{"type":60,"tag":479,"props":3304,"children":3305},{"style":508},[3306],{"type":65,"value":3307}," global ",{"type":60,"tag":479,"props":3309,"children":3310},{"style":502},[3311],{"type":65,"value":2884},{"type":60,"tag":479,"props":3313,"children":3314},{"class":481,"line":3086},[3315,3320,3325],{"type":60,"tag":479,"props":3316,"children":3317},{"style":554},[3318],{"type":65,"value":3319},"  namespace",{"type":60,"tag":479,"props":3321,"children":3322},{"style":1018},[3323],{"type":65,"value":3324}," NodeJS",{"type":60,"tag":479,"props":3326,"children":3327},{"style":502},[3328],{"type":65,"value":612},{"type":60,"tag":479,"props":3330,"children":3332},{"class":481,"line":3331},15,[3333,3338,3343],{"type":60,"tag":479,"props":3334,"children":3335},{"style":554},[3336],{"type":65,"value":3337},"    interface",{"type":60,"tag":479,"props":3339,"children":3340},{"style":1018},[3341],{"type":65,"value":3342}," ProcessEnv",{"type":60,"tag":479,"props":3344,"children":3345},{"style":502},[3346],{"type":65,"value":612},{"type":60,"tag":479,"props":3348,"children":3350},{"class":481,"line":3349},16,[3351,3356,3361,3365],{"type":60,"tag":479,"props":3352,"children":3353},{"style":554},[3354],{"type":65,"value":3355},"      readonly",{"type":60,"tag":479,"props":3357,"children":3358},{"style":699},[3359],{"type":65,"value":3360}," DATABASE_URL",{"type":60,"tag":479,"props":3362,"children":3363},{"style":502},[3364],{"type":65,"value":1015},{"type":60,"tag":479,"props":3366,"children":3367},{"style":1018},[3368],{"type":65,"value":3209},{"type":60,"tag":479,"props":3370,"children":3372},{"class":481,"line":3371},17,[3373,3377,3382,3386],{"type":60,"tag":479,"props":3374,"children":3375},{"style":554},[3376],{"type":65,"value":3355},{"type":60,"tag":479,"props":3378,"children":3379},{"style":699},[3380],{"type":65,"value":3381}," JWT_SECRET",{"type":60,"tag":479,"props":3383,"children":3384},{"style":502},[3385],{"type":65,"value":1015},{"type":60,"tag":479,"props":3387,"children":3388},{"style":1018},[3389],{"type":65,"value":3209},{"type":60,"tag":479,"props":3391,"children":3393},{"class":481,"line":3392},18,[3394],{"type":60,"tag":479,"props":3395,"children":3396},{"style":502},[3397],{"type":65,"value":3398},"    }\n",{"type":60,"tag":479,"props":3400,"children":3402},{"class":481,"line":3401},19,[3403],{"type":60,"tag":479,"props":3404,"children":3405},{"style":502},[3406],{"type":65,"value":3407},"  }\n",{"type":60,"tag":479,"props":3409,"children":3411},{"class":481,"line":3410},20,[3412],{"type":60,"tag":479,"props":3413,"children":3414},{"style":502},[3415],{"type":65,"value":1272},{"type":60,"tag":479,"props":3417,"children":3419},{"class":481,"line":3418},21,[3420],{"type":60,"tag":479,"props":3421,"children":3422},{"emptyLinePlaceholder":544},[3423],{"type":65,"value":547},{"type":60,"tag":479,"props":3425,"children":3427},{"class":481,"line":3426},22,[3428,3432],{"type":60,"tag":479,"props":3429,"children":3430},{"style":496},[3431],{"type":65,"value":1935},{"type":60,"tag":479,"props":3433,"children":3434},{"style":502},[3435],{"type":65,"value":3436}," {}\n",{"type":60,"tag":170,"props":3438,"children":3440},{"id":3439},"common-mistakes",[3441],{"type":65,"value":3442},"Common Mistakes",{"type":60,"tag":456,"props":3444,"children":3446},{"id":3445},"_1-critical-assuming-loaders-are-server-only",[3447],{"type":65,"value":3448},"1. CRITICAL: Assuming loaders are server-only",{"type":60,"tag":468,"props":3450,"children":3452},{"className":470,"code":3451,"language":472,"meta":473,"style":473},"\u002F\u002F WRONG — loader runs on BOTH server and client\nexport const Route = createFileRoute('\u002Fdashboard')({\n  loader: async () => {\n    const secret = process.env.API_SECRET \u002F\u002F LEAKED to client\n    return fetch(`https:\u002F\u002Fapi.example.com\u002Fdata`, {\n      headers: { Authorization: secret },\n    })\n  },\n})\n\n\u002F\u002F CORRECT — use createServerFn\nconst getData = createServerFn({ method: 'GET' }).handler(async () => {\n  const secret = process.env.API_SECRET\n  return fetch(`https:\u002F\u002Fapi.example.com\u002Fdata`, {\n    headers: { Authorization: secret },\n  })\n})\n\nexport const Route = createFileRoute('\u002Fdashboard')({\n  loader: () => getData(),\n})\n",[3453],{"type":60,"tag":89,"props":3454,"children":3455},{"__ignoreMap":473},[3456,3464,3512,3539,3579,3617,3651,3663,3670,3681,3688,3696,3780,3816,3851,3883,3895,3906,3913,3960,3993],{"type":60,"tag":479,"props":3457,"children":3458},{"class":481,"line":482},[3459],{"type":60,"tag":479,"props":3460,"children":3461},{"style":486},[3462],{"type":65,"value":3463},"\u002F\u002F WRONG — loader runs on BOTH server and client\n",{"type":60,"tag":479,"props":3465,"children":3466},{"class":481,"line":492},[3467,3471,3475,3479,3483,3487,3491,3495,3500,3504,3508],{"type":60,"tag":479,"props":3468,"children":3469},{"style":496},[3470],{"type":65,"value":1935},{"type":60,"tag":479,"props":3472,"children":3473},{"style":554},[3474],{"type":65,"value":2843},{"type":60,"tag":479,"props":3476,"children":3477},{"style":508},[3478],{"type":65,"value":2848},{"type":60,"tag":479,"props":3480,"children":3481},{"style":502},[3482],{"type":65,"value":567},{"type":60,"tag":479,"props":3484,"children":3485},{"style":570},[3486],{"type":65,"value":2857},{"type":60,"tag":479,"props":3488,"children":3489},{"style":508},[3490],{"type":65,"value":592},{"type":60,"tag":479,"props":3492,"children":3493},{"style":502},[3494],{"type":65,"value":1710},{"type":60,"tag":479,"props":3496,"children":3497},{"style":529},[3498],{"type":65,"value":3499},"\u002Fdashboard",{"type":60,"tag":479,"props":3501,"children":3502},{"style":502},[3503],{"type":65,"value":1710},{"type":60,"tag":479,"props":3505,"children":3506},{"style":508},[3507],{"type":65,"value":2879},{"type":60,"tag":479,"props":3509,"children":3510},{"style":502},[3511],{"type":65,"value":2884},{"type":60,"tag":479,"props":3513,"children":3514},{"class":481,"line":540},[3515,3519,3523,3527,3531,3535],{"type":60,"tag":479,"props":3516,"children":3517},{"style":570},[3518],{"type":65,"value":2892},{"type":60,"tag":479,"props":3520,"children":3521},{"style":502},[3522],{"type":65,"value":1015},{"type":60,"tag":479,"props":3524,"children":3525},{"style":554},[3526],{"type":65,"value":2901},{"type":60,"tag":479,"props":3528,"children":3529},{"style":502},[3530],{"type":65,"value":602},{"type":60,"tag":479,"props":3532,"children":3533},{"style":554},[3534],{"type":65,"value":607},{"type":60,"tag":479,"props":3536,"children":3537},{"style":502},[3538],{"type":65,"value":612},{"type":60,"tag":479,"props":3540,"children":3541},{"class":481,"line":550},[3542,3546,3550,3554,3558,3562,3566,3570,3574],{"type":60,"tag":479,"props":3543,"children":3544},{"style":554},[3545],{"type":65,"value":2921},{"type":60,"tag":479,"props":3547,"children":3548},{"style":508},[3549],{"type":65,"value":626},{"type":60,"tag":479,"props":3551,"children":3552},{"style":502},[3553],{"type":65,"value":631},{"type":60,"tag":479,"props":3555,"children":3556},{"style":508},[3557],{"type":65,"value":636},{"type":60,"tag":479,"props":3559,"children":3560},{"style":502},[3561],{"type":65,"value":582},{"type":60,"tag":479,"props":3563,"children":3564},{"style":508},[3565],{"type":65,"value":645},{"type":60,"tag":479,"props":3567,"children":3568},{"style":502},[3569],{"type":65,"value":582},{"type":60,"tag":479,"props":3571,"children":3572},{"style":508},[3573],{"type":65,"value":654},{"type":60,"tag":479,"props":3575,"children":3576},{"style":486},[3577],{"type":65,"value":3578}," \u002F\u002F LEAKED to client\n",{"type":60,"tag":479,"props":3580,"children":3581},{"class":481,"line":615},[3582,3586,3591,3595,3600,3605,3609,3613],{"type":60,"tag":479,"props":3583,"children":3584},{"style":496},[3585],{"type":65,"value":2951},{"type":60,"tag":479,"props":3587,"children":3588},{"style":570},[3589],{"type":65,"value":3590}," fetch",{"type":60,"tag":479,"props":3592,"children":3593},{"style":699},[3594],{"type":65,"value":592},{"type":60,"tag":479,"props":3596,"children":3597},{"style":502},[3598],{"type":65,"value":3599},"`",{"type":60,"tag":479,"props":3601,"children":3602},{"style":529},[3603],{"type":65,"value":3604},"https:\u002F\u002Fapi.example.com\u002Fdata",{"type":60,"tag":479,"props":3606,"children":3607},{"style":502},[3608],{"type":65,"value":3599},{"type":60,"tag":479,"props":3610,"children":3611},{"style":502},[3612],{"type":65,"value":1026},{"type":60,"tag":479,"props":3614,"children":3615},{"style":502},[3616],{"type":65,"value":612},{"type":60,"tag":479,"props":3618,"children":3619},{"class":481,"line":662},[3620,3625,3629,3633,3638,3642,3646],{"type":60,"tag":479,"props":3621,"children":3622},{"style":699},[3623],{"type":65,"value":3624},"      headers",{"type":60,"tag":479,"props":3626,"children":3627},{"style":502},[3628],{"type":65,"value":1015},{"type":60,"tag":479,"props":3630,"children":3631},{"style":502},[3632],{"type":65,"value":505},{"type":60,"tag":479,"props":3634,"children":3635},{"style":699},[3636],{"type":65,"value":3637}," Authorization",{"type":60,"tag":479,"props":3639,"children":3640},{"style":502},[3641],{"type":65,"value":1015},{"type":60,"tag":479,"props":3643,"children":3644},{"style":508},[3645],{"type":65,"value":626},{"type":60,"tag":479,"props":3647,"children":3648},{"style":502},[3649],{"type":65,"value":3650}," },\n",{"type":60,"tag":479,"props":3652,"children":3653},{"class":481,"line":705},[3654,3659],{"type":60,"tag":479,"props":3655,"children":3656},{"style":502},[3657],{"type":65,"value":3658},"    }",{"type":60,"tag":479,"props":3660,"children":3661},{"style":699},[3662],{"type":65,"value":716},{"type":60,"tag":479,"props":3664,"children":3665},{"class":481,"line":719},[3666],{"type":60,"tag":479,"props":3667,"children":3668},{"style":502},[3669],{"type":65,"value":2972},{"type":60,"tag":479,"props":3671,"children":3672},{"class":481,"line":727},[3673,3677],{"type":60,"tag":479,"props":3674,"children":3675},{"style":502},[3676],{"type":65,"value":711},{"type":60,"tag":479,"props":3678,"children":3679},{"style":508},[3680],{"type":65,"value":716},{"type":60,"tag":479,"props":3682,"children":3683},{"class":481,"line":736},[3684],{"type":60,"tag":479,"props":3685,"children":3686},{"emptyLinePlaceholder":544},[3687],{"type":65,"value":547},{"type":60,"tag":479,"props":3689,"children":3690},{"class":481,"line":1529},[3691],{"type":60,"tag":479,"props":3692,"children":3693},{"style":486},[3694],{"type":65,"value":3695},"\u002F\u002F CORRECT — use createServerFn\n",{"type":60,"tag":479,"props":3697,"children":3698},{"class":481,"line":3040},[3699,3703,3708,3712,3716,3720,3724,3728,3732,3736,3740,3744,3748,3752,3756,3760,3764,3768,3772,3776],{"type":60,"tag":479,"props":3700,"children":3701},{"style":554},[3702],{"type":65,"value":557},{"type":60,"tag":479,"props":3704,"children":3705},{"style":508},[3706],{"type":65,"value":3707}," getData ",{"type":60,"tag":479,"props":3709,"children":3710},{"style":502},[3711],{"type":65,"value":567},{"type":60,"tag":479,"props":3713,"children":3714},{"style":570},[3715],{"type":65,"value":511},{"type":60,"tag":479,"props":3717,"children":3718},{"style":508},[3719],{"type":65,"value":592},{"type":60,"tag":479,"props":3721,"children":3722},{"style":502},[3723],{"type":65,"value":1508},{"type":60,"tag":479,"props":3725,"children":3726},{"style":699},[3727],{"type":65,"value":2736},{"type":60,"tag":479,"props":3729,"children":3730},{"style":502},[3731],{"type":65,"value":1015},{"type":60,"tag":479,"props":3733,"children":3734},{"style":502},[3735],{"type":65,"value":526},{"type":60,"tag":479,"props":3737,"children":3738},{"style":529},[3739],{"type":65,"value":2749},{"type":60,"tag":479,"props":3741,"children":3742},{"style":502},[3743],{"type":65,"value":1710},{"type":60,"tag":479,"props":3745,"children":3746},{"style":502},[3747],{"type":65,"value":516},{"type":60,"tag":479,"props":3749,"children":3750},{"style":508},[3751],{"type":65,"value":1044},{"type":60,"tag":479,"props":3753,"children":3754},{"style":502},[3755],{"type":65,"value":582},{"type":60,"tag":479,"props":3757,"children":3758},{"style":570},[3759],{"type":65,"value":587},{"type":60,"tag":479,"props":3761,"children":3762},{"style":508},[3763],{"type":65,"value":592},{"type":60,"tag":479,"props":3765,"children":3766},{"style":554},[3767],{"type":65,"value":597},{"type":60,"tag":479,"props":3769,"children":3770},{"style":502},[3771],{"type":65,"value":602},{"type":60,"tag":479,"props":3773,"children":3774},{"style":554},[3775],{"type":65,"value":607},{"type":60,"tag":479,"props":3777,"children":3778},{"style":502},[3779],{"type":65,"value":612},{"type":60,"tag":479,"props":3781,"children":3782},{"class":481,"line":3078},[3783,3787,3791,3795,3799,3803,3807,3811],{"type":60,"tag":479,"props":3784,"children":3785},{"style":554},[3786],{"type":65,"value":621},{"type":60,"tag":479,"props":3788,"children":3789},{"style":508},[3790],{"type":65,"value":626},{"type":60,"tag":479,"props":3792,"children":3793},{"style":502},[3794],{"type":65,"value":631},{"type":60,"tag":479,"props":3796,"children":3797},{"style":508},[3798],{"type":65,"value":636},{"type":60,"tag":479,"props":3800,"children":3801},{"style":502},[3802],{"type":65,"value":582},{"type":60,"tag":479,"props":3804,"children":3805},{"style":508},[3806],{"type":65,"value":645},{"type":60,"tag":479,"props":3808,"children":3809},{"style":502},[3810],{"type":65,"value":582},{"type":60,"tag":479,"props":3812,"children":3813},{"style":508},[3814],{"type":65,"value":3815},"API_SECRET\n",{"type":60,"tag":479,"props":3817,"children":3818},{"class":481,"line":3086},[3819,3823,3827,3831,3835,3839,3843,3847],{"type":60,"tag":479,"props":3820,"children":3821},{"style":496},[3822],{"type":65,"value":668},{"type":60,"tag":479,"props":3824,"children":3825},{"style":570},[3826],{"type":65,"value":3590},{"type":60,"tag":479,"props":3828,"children":3829},{"style":699},[3830],{"type":65,"value":592},{"type":60,"tag":479,"props":3832,"children":3833},{"style":502},[3834],{"type":65,"value":3599},{"type":60,"tag":479,"props":3836,"children":3837},{"style":529},[3838],{"type":65,"value":3604},{"type":60,"tag":479,"props":3840,"children":3841},{"style":502},[3842],{"type":65,"value":3599},{"type":60,"tag":479,"props":3844,"children":3845},{"style":502},[3846],{"type":65,"value":1026},{"type":60,"tag":479,"props":3848,"children":3849},{"style":502},[3850],{"type":65,"value":612},{"type":60,"tag":479,"props":3852,"children":3853},{"class":481,"line":3331},[3854,3859,3863,3867,3871,3875,3879],{"type":60,"tag":479,"props":3855,"children":3856},{"style":699},[3857],{"type":65,"value":3858},"    headers",{"type":60,"tag":479,"props":3860,"children":3861},{"style":502},[3862],{"type":65,"value":1015},{"type":60,"tag":479,"props":3864,"children":3865},{"style":502},[3866],{"type":65,"value":505},{"type":60,"tag":479,"props":3868,"children":3869},{"style":699},[3870],{"type":65,"value":3637},{"type":60,"tag":479,"props":3872,"children":3873},{"style":502},[3874],{"type":65,"value":1015},{"type":60,"tag":479,"props":3876,"children":3877},{"style":508},[3878],{"type":65,"value":626},{"type":60,"tag":479,"props":3880,"children":3881},{"style":502},[3882],{"type":65,"value":3650},{"type":60,"tag":479,"props":3884,"children":3885},{"class":481,"line":3349},[3886,3891],{"type":60,"tag":479,"props":3887,"children":3888},{"style":502},[3889],{"type":65,"value":3890},"  }",{"type":60,"tag":479,"props":3892,"children":3893},{"style":699},[3894],{"type":65,"value":716},{"type":60,"tag":479,"props":3896,"children":3897},{"class":481,"line":3371},[3898,3902],{"type":60,"tag":479,"props":3899,"children":3900},{"style":502},[3901],{"type":65,"value":711},{"type":60,"tag":479,"props":3903,"children":3904},{"style":508},[3905],{"type":65,"value":716},{"type":60,"tag":479,"props":3907,"children":3908},{"class":481,"line":3392},[3909],{"type":60,"tag":479,"props":3910,"children":3911},{"emptyLinePlaceholder":544},[3912],{"type":65,"value":547},{"type":60,"tag":479,"props":3914,"children":3915},{"class":481,"line":3401},[3916,3920,3924,3928,3932,3936,3940,3944,3948,3952,3956],{"type":60,"tag":479,"props":3917,"children":3918},{"style":496},[3919],{"type":65,"value":1935},{"type":60,"tag":479,"props":3921,"children":3922},{"style":554},[3923],{"type":65,"value":2843},{"type":60,"tag":479,"props":3925,"children":3926},{"style":508},[3927],{"type":65,"value":2848},{"type":60,"tag":479,"props":3929,"children":3930},{"style":502},[3931],{"type":65,"value":567},{"type":60,"tag":479,"props":3933,"children":3934},{"style":570},[3935],{"type":65,"value":2857},{"type":60,"tag":479,"props":3937,"children":3938},{"style":508},[3939],{"type":65,"value":592},{"type":60,"tag":479,"props":3941,"children":3942},{"style":502},[3943],{"type":65,"value":1710},{"type":60,"tag":479,"props":3945,"children":3946},{"style":529},[3947],{"type":65,"value":3499},{"type":60,"tag":479,"props":3949,"children":3950},{"style":502},[3951],{"type":65,"value":1710},{"type":60,"tag":479,"props":3953,"children":3954},{"style":508},[3955],{"type":65,"value":2879},{"type":60,"tag":479,"props":3957,"children":3958},{"style":502},[3959],{"type":65,"value":2884},{"type":60,"tag":479,"props":3961,"children":3962},{"class":481,"line":3410},[3963,3967,3971,3975,3979,3984,3988],{"type":60,"tag":479,"props":3964,"children":3965},{"style":570},[3966],{"type":65,"value":2892},{"type":60,"tag":479,"props":3968,"children":3969},{"style":502},[3970],{"type":65,"value":1015},{"type":60,"tag":479,"props":3972,"children":3973},{"style":502},[3974],{"type":65,"value":602},{"type":60,"tag":479,"props":3976,"children":3977},{"style":554},[3978],{"type":65,"value":607},{"type":60,"tag":479,"props":3980,"children":3981},{"style":570},[3982],{"type":65,"value":3983}," getData",{"type":60,"tag":479,"props":3985,"children":3986},{"style":508},[3987],{"type":65,"value":577},{"type":60,"tag":479,"props":3989,"children":3990},{"style":502},[3991],{"type":65,"value":3992},",\n",{"type":60,"tag":479,"props":3994,"children":3995},{"class":481,"line":3418},[3996,4000],{"type":60,"tag":479,"props":3997,"children":3998},{"style":502},[3999],{"type":65,"value":711},{"type":60,"tag":479,"props":4001,"children":4002},{"style":508},[4003],{"type":65,"value":716},{"type":60,"tag":456,"props":4005,"children":4007},{"id":4006},"_2-critical-reading-processenv-at-module-scope",[4008],{"type":65,"value":4009},"2. CRITICAL: Reading process.env at module scope",{"type":60,"tag":68,"props":4011,"children":4012},{},[4013,4015,4020,4022,4026],{"type":65,"value":4014},"Module-level ",{"type":60,"tag":89,"props":4016,"children":4018},{"className":4017},[],[4019],{"type":65,"value":108},{"type":65,"value":4021}," reads are wrong for ",{"type":60,"tag":81,"props":4023,"children":4024},{},[4025],{"type":65,"value":115},{"type":65,"value":4027}," reasons, not one:",{"type":60,"tag":4029,"props":4030,"children":4031},"ol",{},[4032,4042],{"type":60,"tag":2178,"props":4033,"children":4034},{},[4035,4040],{"type":60,"tag":81,"props":4036,"children":4037},{},[4038],{"type":65,"value":4039},"Security:",{"type":65,"value":4041}," the value can be inlined into the client bundle, leaking secrets.",{"type":60,"tag":2178,"props":4043,"children":4044},{},[4045,4050,4052,4057],{"type":60,"tag":81,"props":4046,"children":4047},{},[4048],{"type":65,"value":4049},"Runtime correctness (edge runtimes):",{"type":65,"value":4051}," Cloudflare Workers and other edge SSR runtimes inject env at request time. Module-level code runs at module load, before the env exists, so the read evaluates to ",{"type":60,"tag":89,"props":4053,"children":4055},{"className":4054},[],[4056],{"type":65,"value":123},{"type":65,"value":4058}," even on the server. The bug only surfaces at deploy time.",{"type":60,"tag":468,"props":4060,"children":4062},{"className":470,"code":4061,"language":472,"meta":473,"style":473},"\u002F\u002F WRONG — leaks to client AND is undefined on Workers\nconst apiKey = process.env.SECRET_KEY\nexport function fetchData() {\n  \u002F* uses apiKey, which is undefined under Worker SSR *\u002F\n}\n\n\u002F\u002F CORRECT — read per-request, inside the handler\nconst fetchData = createServerFn({ method: 'GET' }).handler(async () => {\n  const apiKey = process.env.SECRET_KEY\n  return fetch(url, { headers: { Authorization: apiKey } })\n})\n",[4063],{"type":60,"tag":89,"props":4064,"children":4065},{"__ignoreMap":473},[4066,4074,4111,4135,4143,4150,4157,4165,4249,4285,4349],{"type":60,"tag":479,"props":4067,"children":4068},{"class":481,"line":482},[4069],{"type":60,"tag":479,"props":4070,"children":4071},{"style":486},[4072],{"type":65,"value":4073},"\u002F\u002F WRONG — leaks to client AND is undefined on Workers\n",{"type":60,"tag":479,"props":4075,"children":4076},{"class":481,"line":492},[4077,4081,4086,4090,4094,4098,4102,4106],{"type":60,"tag":479,"props":4078,"children":4079},{"style":554},[4080],{"type":65,"value":557},{"type":60,"tag":479,"props":4082,"children":4083},{"style":508},[4084],{"type":65,"value":4085}," apiKey ",{"type":60,"tag":479,"props":4087,"children":4088},{"style":502},[4089],{"type":65,"value":567},{"type":60,"tag":479,"props":4091,"children":4092},{"style":508},[4093],{"type":65,"value":636},{"type":60,"tag":479,"props":4095,"children":4096},{"style":502},[4097],{"type":65,"value":582},{"type":60,"tag":479,"props":4099,"children":4100},{"style":508},[4101],{"type":65,"value":645},{"type":60,"tag":479,"props":4103,"children":4104},{"style":502},[4105],{"type":65,"value":582},{"type":60,"tag":479,"props":4107,"children":4108},{"style":508},[4109],{"type":65,"value":4110},"SECRET_KEY\n",{"type":60,"tag":479,"props":4112,"children":4113},{"class":481,"line":540},[4114,4118,4122,4127,4131],{"type":60,"tag":479,"props":4115,"children":4116},{"style":496},[4117],{"type":65,"value":1935},{"type":60,"tag":479,"props":4119,"children":4120},{"style":554},[4121],{"type":65,"value":1940},{"type":60,"tag":479,"props":4123,"children":4124},{"style":570},[4125],{"type":65,"value":4126}," fetchData",{"type":60,"tag":479,"props":4128,"children":4129},{"style":502},[4130],{"type":65,"value":577},{"type":60,"tag":479,"props":4132,"children":4133},{"style":502},[4134],{"type":65,"value":612},{"type":60,"tag":479,"props":4136,"children":4137},{"class":481,"line":550},[4138],{"type":60,"tag":479,"props":4139,"children":4140},{"style":486},[4141],{"type":65,"value":4142},"  \u002F* uses apiKey, which is undefined under Worker SSR *\u002F\n",{"type":60,"tag":479,"props":4144,"children":4145},{"class":481,"line":615},[4146],{"type":60,"tag":479,"props":4147,"children":4148},{"style":502},[4149],{"type":65,"value":1272},{"type":60,"tag":479,"props":4151,"children":4152},{"class":481,"line":662},[4153],{"type":60,"tag":479,"props":4154,"children":4155},{"emptyLinePlaceholder":544},[4156],{"type":65,"value":547},{"type":60,"tag":479,"props":4158,"children":4159},{"class":481,"line":705},[4160],{"type":60,"tag":479,"props":4161,"children":4162},{"style":486},[4163],{"type":65,"value":4164},"\u002F\u002F CORRECT — read per-request, inside the handler\n",{"type":60,"tag":479,"props":4166,"children":4167},{"class":481,"line":719},[4168,4172,4177,4181,4185,4189,4193,4197,4201,4205,4209,4213,4217,4221,4225,4229,4233,4237,4241,4245],{"type":60,"tag":479,"props":4169,"children":4170},{"style":554},[4171],{"type":65,"value":557},{"type":60,"tag":479,"props":4173,"children":4174},{"style":508},[4175],{"type":65,"value":4176}," fetchData ",{"type":60,"tag":479,"props":4178,"children":4179},{"style":502},[4180],{"type":65,"value":567},{"type":60,"tag":479,"props":4182,"children":4183},{"style":570},[4184],{"type":65,"value":511},{"type":60,"tag":479,"props":4186,"children":4187},{"style":508},[4188],{"type":65,"value":592},{"type":60,"tag":479,"props":4190,"children":4191},{"style":502},[4192],{"type":65,"value":1508},{"type":60,"tag":479,"props":4194,"children":4195},{"style":699},[4196],{"type":65,"value":2736},{"type":60,"tag":479,"props":4198,"children":4199},{"style":502},[4200],{"type":65,"value":1015},{"type":60,"tag":479,"props":4202,"children":4203},{"style":502},[4204],{"type":65,"value":526},{"type":60,"tag":479,"props":4206,"children":4207},{"style":529},[4208],{"type":65,"value":2749},{"type":60,"tag":479,"props":4210,"children":4211},{"style":502},[4212],{"type":65,"value":1710},{"type":60,"tag":479,"props":4214,"children":4215},{"style":502},[4216],{"type":65,"value":516},{"type":60,"tag":479,"props":4218,"children":4219},{"style":508},[4220],{"type":65,"value":1044},{"type":60,"tag":479,"props":4222,"children":4223},{"style":502},[4224],{"type":65,"value":582},{"type":60,"tag":479,"props":4226,"children":4227},{"style":570},[4228],{"type":65,"value":587},{"type":60,"tag":479,"props":4230,"children":4231},{"style":508},[4232],{"type":65,"value":592},{"type":60,"tag":479,"props":4234,"children":4235},{"style":554},[4236],{"type":65,"value":597},{"type":60,"tag":479,"props":4238,"children":4239},{"style":502},[4240],{"type":65,"value":602},{"type":60,"tag":479,"props":4242,"children":4243},{"style":554},[4244],{"type":65,"value":607},{"type":60,"tag":479,"props":4246,"children":4247},{"style":502},[4248],{"type":65,"value":612},{"type":60,"tag":479,"props":4250,"children":4251},{"class":481,"line":727},[4252,4256,4261,4265,4269,4273,4277,4281],{"type":60,"tag":479,"props":4253,"children":4254},{"style":554},[4255],{"type":65,"value":621},{"type":60,"tag":479,"props":4257,"children":4258},{"style":508},[4259],{"type":65,"value":4260}," apiKey",{"type":60,"tag":479,"props":4262,"children":4263},{"style":502},[4264],{"type":65,"value":631},{"type":60,"tag":479,"props":4266,"children":4267},{"style":508},[4268],{"type":65,"value":636},{"type":60,"tag":479,"props":4270,"children":4271},{"style":502},[4272],{"type":65,"value":582},{"type":60,"tag":479,"props":4274,"children":4275},{"style":508},[4276],{"type":65,"value":645},{"type":60,"tag":479,"props":4278,"children":4279},{"style":502},[4280],{"type":65,"value":582},{"type":60,"tag":479,"props":4282,"children":4283},{"style":508},[4284],{"type":65,"value":4110},{"type":60,"tag":479,"props":4286,"children":4287},{"class":481,"line":736},[4288,4292,4296,4300,4304,4308,4312,4317,4321,4325,4329,4333,4337,4341,4345],{"type":60,"tag":479,"props":4289,"children":4290},{"style":496},[4291],{"type":65,"value":668},{"type":60,"tag":479,"props":4293,"children":4294},{"style":570},[4295],{"type":65,"value":3590},{"type":60,"tag":479,"props":4297,"children":4298},{"style":699},[4299],{"type":65,"value":592},{"type":60,"tag":479,"props":4301,"children":4302},{"style":508},[4303],{"type":65,"value":38},{"type":60,"tag":479,"props":4305,"children":4306},{"style":502},[4307],{"type":65,"value":1026},{"type":60,"tag":479,"props":4309,"children":4310},{"style":502},[4311],{"type":65,"value":505},{"type":60,"tag":479,"props":4313,"children":4314},{"style":699},[4315],{"type":65,"value":4316}," headers",{"type":60,"tag":479,"props":4318,"children":4319},{"style":502},[4320],{"type":65,"value":1015},{"type":60,"tag":479,"props":4322,"children":4323},{"style":502},[4324],{"type":65,"value":505},{"type":60,"tag":479,"props":4326,"children":4327},{"style":699},[4328],{"type":65,"value":3637},{"type":60,"tag":479,"props":4330,"children":4331},{"style":502},[4332],{"type":65,"value":1015},{"type":60,"tag":479,"props":4334,"children":4335},{"style":508},[4336],{"type":65,"value":4260},{"type":60,"tag":479,"props":4338,"children":4339},{"style":502},[4340],{"type":65,"value":516},{"type":60,"tag":479,"props":4342,"children":4343},{"style":502},[4344],{"type":65,"value":516},{"type":60,"tag":479,"props":4346,"children":4347},{"style":699},[4348],{"type":65,"value":716},{"type":60,"tag":479,"props":4350,"children":4351},{"class":481,"line":1529},[4352,4356],{"type":60,"tag":479,"props":4353,"children":4354},{"style":502},[4355],{"type":65,"value":711},{"type":60,"tag":479,"props":4357,"children":4358},{"style":508},[4359],{"type":65,"value":716},{"type":60,"tag":68,"props":4361,"children":4362},{},[4363,4365,4370],{"type":65,"value":4364},"The same rule applies to middleware ",{"type":60,"tag":89,"props":4366,"children":4368},{"className":4367},[],[4369],{"type":65,"value":331},{"type":65,"value":4371}," callbacks, server-route handlers, and any function that runs per request — read env there, not at the top of the file.",{"type":60,"tag":456,"props":4373,"children":4375},{"id":4374},"_3-critical-using-vite_-prefix-for-server-secrets",[4376],{"type":65,"value":4377},"3. CRITICAL: Using VITE_ prefix for server secrets",{"type":60,"tag":468,"props":4379,"children":4383},{"className":4380,"code":4381,"language":4382,"meta":473,"style":473},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# WRONG — exposed to client bundle\nVITE_SECRET_API_KEY=sk_live_xxx\n\n# CORRECT — no prefix for server secrets\nSECRET_API_KEY=sk_live_xxx\n\n# CORRECT — VITE_ only for public client values\nVITE_APP_NAME=My App\n","bash",[4384],{"type":60,"tag":89,"props":4385,"children":4386},{"__ignoreMap":473},[4387,4395,4412,4419,4427,4443,4450,4458],{"type":60,"tag":479,"props":4388,"children":4389},{"class":481,"line":482},[4390],{"type":60,"tag":479,"props":4391,"children":4392},{"style":486},[4393],{"type":65,"value":4394},"# WRONG — exposed to client bundle\n",{"type":60,"tag":479,"props":4396,"children":4397},{"class":481,"line":492},[4398,4403,4407],{"type":60,"tag":479,"props":4399,"children":4400},{"style":508},[4401],{"type":65,"value":4402},"VITE_SECRET_API_KEY",{"type":60,"tag":479,"props":4404,"children":4405},{"style":502},[4406],{"type":65,"value":567},{"type":60,"tag":479,"props":4408,"children":4409},{"style":529},[4410],{"type":65,"value":4411},"sk_live_xxx\n",{"type":60,"tag":479,"props":4413,"children":4414},{"class":481,"line":540},[4415],{"type":60,"tag":479,"props":4416,"children":4417},{"emptyLinePlaceholder":544},[4418],{"type":65,"value":547},{"type":60,"tag":479,"props":4420,"children":4421},{"class":481,"line":550},[4422],{"type":60,"tag":479,"props":4423,"children":4424},{"style":486},[4425],{"type":65,"value":4426},"# CORRECT — no prefix for server secrets\n",{"type":60,"tag":479,"props":4428,"children":4429},{"class":481,"line":615},[4430,4435,4439],{"type":60,"tag":479,"props":4431,"children":4432},{"style":508},[4433],{"type":65,"value":4434},"SECRET_API_KEY",{"type":60,"tag":479,"props":4436,"children":4437},{"style":502},[4438],{"type":65,"value":567},{"type":60,"tag":479,"props":4440,"children":4441},{"style":529},[4442],{"type":65,"value":4411},{"type":60,"tag":479,"props":4444,"children":4445},{"class":481,"line":662},[4446],{"type":60,"tag":479,"props":4447,"children":4448},{"emptyLinePlaceholder":544},[4449],{"type":65,"value":547},{"type":60,"tag":479,"props":4451,"children":4452},{"class":481,"line":705},[4453],{"type":60,"tag":479,"props":4454,"children":4455},{"style":486},[4456],{"type":65,"value":4457},"# CORRECT — VITE_ only for public client values\n",{"type":60,"tag":479,"props":4459,"children":4460},{"class":481,"line":719},[4461,4466,4470,4475],{"type":60,"tag":479,"props":4462,"children":4463},{"style":508},[4464],{"type":65,"value":4465},"VITE_APP_NAME",{"type":60,"tag":479,"props":4467,"children":4468},{"style":502},[4469],{"type":65,"value":567},{"type":60,"tag":479,"props":4471,"children":4472},{"style":529},[4473],{"type":65,"value":4474},"My",{"type":60,"tag":479,"props":4476,"children":4477},{"style":1018},[4478],{"type":65,"value":4479}," App\n",{"type":60,"tag":456,"props":4481,"children":4483},{"id":4482},"_4-high-hydration-mismatches",[4484],{"type":65,"value":4485},"4. HIGH: Hydration mismatches",{"type":60,"tag":468,"props":4487,"children":4489},{"className":470,"code":4488,"language":472,"meta":473,"style":473},"\u002F\u002F WRONG — different content server vs client\nfunction CurrentTime() {\n  return \u003Cdiv>{new Date().toLocaleString()}\u003C\u002Fdiv>\n}\n\n\u002F\u002F CORRECT — consistent rendering\nfunction CurrentTime() {\n  const [time, setTime] = useState\u003Cstring>()\n  useEffect(() => {\n    setTime(new Date().toLocaleString())\n  }, [])\n  return \u003Cdiv>{time || 'Loading...'}\u003C\u002Fdiv>\n}\n",[4490],{"type":60,"tag":89,"props":4491,"children":4492},{"__ignoreMap":473},[4493,4501,4521,4575,4582,4589,4597,4616,4672,4696,4734,4747,4801],{"type":60,"tag":479,"props":4494,"children":4495},{"class":481,"line":482},[4496],{"type":60,"tag":479,"props":4497,"children":4498},{"style":486},[4499],{"type":65,"value":4500},"\u002F\u002F WRONG — different content server vs client\n",{"type":60,"tag":479,"props":4502,"children":4503},{"class":481,"line":492},[4504,4508,4513,4517],{"type":60,"tag":479,"props":4505,"children":4506},{"style":554},[4507],{"type":65,"value":1173},{"type":60,"tag":479,"props":4509,"children":4510},{"style":570},[4511],{"type":65,"value":4512}," CurrentTime",{"type":60,"tag":479,"props":4514,"children":4515},{"style":502},[4516],{"type":65,"value":577},{"type":60,"tag":479,"props":4518,"children":4519},{"style":502},[4520],{"type":65,"value":612},{"type":60,"tag":479,"props":4522,"children":4523},{"class":481,"line":540},[4524,4528,4532,4536,4541,4546,4550,4554,4559,4563,4567,4571],{"type":60,"tag":479,"props":4525,"children":4526},{"style":496},[4527],{"type":65,"value":668},{"type":60,"tag":479,"props":4529,"children":4530},{"style":502},[4531],{"type":65,"value":1488},{"type":60,"tag":479,"props":4533,"children":4534},{"style":699},[4535],{"type":65,"value":1493},{"type":60,"tag":479,"props":4537,"children":4538},{"style":502},[4539],{"type":65,"value":4540},">{new",{"type":60,"tag":479,"props":4542,"children":4543},{"style":570},[4544],{"type":65,"value":4545}," Date",{"type":60,"tag":479,"props":4547,"children":4548},{"style":508},[4549],{"type":65,"value":577},{"type":60,"tag":479,"props":4551,"children":4552},{"style":502},[4553],{"type":65,"value":582},{"type":60,"tag":479,"props":4555,"children":4556},{"style":570},[4557],{"type":65,"value":4558},"toLocaleString",{"type":60,"tag":479,"props":4560,"children":4561},{"style":508},[4562],{"type":65,"value":577},{"type":60,"tag":479,"props":4564,"children":4565},{"style":502},[4566],{"type":65,"value":1518},{"type":60,"tag":479,"props":4568,"children":4569},{"style":699},[4570],{"type":65,"value":1493},{"type":60,"tag":479,"props":4572,"children":4573},{"style":502},[4574],{"type":65,"value":1256},{"type":60,"tag":479,"props":4576,"children":4577},{"class":481,"line":550},[4578],{"type":60,"tag":479,"props":4579,"children":4580},{"style":502},[4581],{"type":65,"value":1272},{"type":60,"tag":479,"props":4583,"children":4584},{"class":481,"line":615},[4585],{"type":60,"tag":479,"props":4586,"children":4587},{"emptyLinePlaceholder":544},[4588],{"type":65,"value":547},{"type":60,"tag":479,"props":4590,"children":4591},{"class":481,"line":662},[4592],{"type":60,"tag":479,"props":4593,"children":4594},{"style":486},[4595],{"type":65,"value":4596},"\u002F\u002F CORRECT — consistent rendering\n",{"type":60,"tag":479,"props":4598,"children":4599},{"class":481,"line":705},[4600,4604,4608,4612],{"type":60,"tag":479,"props":4601,"children":4602},{"style":554},[4603],{"type":65,"value":1173},{"type":60,"tag":479,"props":4605,"children":4606},{"style":570},[4607],{"type":65,"value":4512},{"type":60,"tag":479,"props":4609,"children":4610},{"style":502},[4611],{"type":65,"value":577},{"type":60,"tag":479,"props":4613,"children":4614},{"style":502},[4615],{"type":65,"value":612},{"type":60,"tag":479,"props":4617,"children":4618},{"class":481,"line":719},[4619,4623,4628,4633,4637,4642,4647,4651,4656,4660,4664,4668],{"type":60,"tag":479,"props":4620,"children":4621},{"style":554},[4622],{"type":65,"value":621},{"type":60,"tag":479,"props":4624,"children":4625},{"style":502},[4626],{"type":65,"value":4627}," [",{"type":60,"tag":479,"props":4629,"children":4630},{"style":508},[4631],{"type":65,"value":4632},"time",{"type":60,"tag":479,"props":4634,"children":4635},{"style":502},[4636],{"type":65,"value":1026},{"type":60,"tag":479,"props":4638,"children":4639},{"style":508},[4640],{"type":65,"value":4641}," setTime",{"type":60,"tag":479,"props":4643,"children":4644},{"style":502},[4645],{"type":65,"value":4646},"]",{"type":60,"tag":479,"props":4648,"children":4649},{"style":502},[4650],{"type":65,"value":631},{"type":60,"tag":479,"props":4652,"children":4653},{"style":570},[4654],{"type":65,"value":4655}," useState",{"type":60,"tag":479,"props":4657,"children":4658},{"style":502},[4659],{"type":65,"value":2077},{"type":60,"tag":479,"props":4661,"children":4662},{"style":1018},[4663],{"type":65,"value":2082},{"type":60,"tag":479,"props":4665,"children":4666},{"style":502},[4667],{"type":65,"value":1498},{"type":60,"tag":479,"props":4669,"children":4670},{"style":699},[4671],{"type":65,"value":702},{"type":60,"tag":479,"props":4673,"children":4674},{"class":481,"line":727},[4675,4680,4684,4688,4692],{"type":60,"tag":479,"props":4676,"children":4677},{"style":570},[4678],{"type":65,"value":4679},"  useEffect",{"type":60,"tag":479,"props":4681,"children":4682},{"style":699},[4683],{"type":65,"value":592},{"type":60,"tag":479,"props":4685,"children":4686},{"style":502},[4687],{"type":65,"value":577},{"type":60,"tag":479,"props":4689,"children":4690},{"style":554},[4691],{"type":65,"value":607},{"type":60,"tag":479,"props":4693,"children":4694},{"style":502},[4695],{"type":65,"value":612},{"type":60,"tag":479,"props":4697,"children":4698},{"class":481,"line":736},[4699,4704,4708,4713,4717,4721,4725,4729],{"type":60,"tag":479,"props":4700,"children":4701},{"style":570},[4702],{"type":65,"value":4703},"    setTime",{"type":60,"tag":479,"props":4705,"children":4706},{"style":699},[4707],{"type":65,"value":592},{"type":60,"tag":479,"props":4709,"children":4710},{"style":502},[4711],{"type":65,"value":4712},"new",{"type":60,"tag":479,"props":4714,"children":4715},{"style":570},[4716],{"type":65,"value":4545},{"type":60,"tag":479,"props":4718,"children":4719},{"style":699},[4720],{"type":65,"value":577},{"type":60,"tag":479,"props":4722,"children":4723},{"style":502},[4724],{"type":65,"value":582},{"type":60,"tag":479,"props":4726,"children":4727},{"style":570},[4728],{"type":65,"value":4558},{"type":60,"tag":479,"props":4730,"children":4731},{"style":699},[4732],{"type":65,"value":4733},"())\n",{"type":60,"tag":479,"props":4735,"children":4736},{"class":481,"line":1529},[4737,4742],{"type":60,"tag":479,"props":4738,"children":4739},{"style":502},[4740],{"type":65,"value":4741},"  },",{"type":60,"tag":479,"props":4743,"children":4744},{"style":699},[4745],{"type":65,"value":4746}," [])\n",{"type":60,"tag":479,"props":4748,"children":4749},{"class":481,"line":3040},[4750,4754,4758,4762,4766,4771,4776,4780,4785,4789,4793,4797],{"type":60,"tag":479,"props":4751,"children":4752},{"style":496},[4753],{"type":65,"value":668},{"type":60,"tag":479,"props":4755,"children":4756},{"style":502},[4757],{"type":65,"value":1488},{"type":60,"tag":479,"props":4759,"children":4760},{"style":699},[4761],{"type":65,"value":1493},{"type":60,"tag":479,"props":4763,"children":4764},{"style":502},[4765],{"type":65,"value":3058},{"type":60,"tag":479,"props":4767,"children":4768},{"style":508},[4769],{"type":65,"value":4770},"time ",{"type":60,"tag":479,"props":4772,"children":4773},{"style":502},[4774],{"type":65,"value":4775},"||",{"type":60,"tag":479,"props":4777,"children":4778},{"style":502},[4779],{"type":65,"value":526},{"type":60,"tag":479,"props":4781,"children":4782},{"style":529},[4783],{"type":65,"value":4784},"Loading...",{"type":60,"tag":479,"props":4786,"children":4787},{"style":502},[4788],{"type":65,"value":1710},{"type":60,"tag":479,"props":4790,"children":4791},{"style":502},[4792],{"type":65,"value":1518},{"type":60,"tag":479,"props":4794,"children":4795},{"style":699},[4796],{"type":65,"value":1493},{"type":60,"tag":479,"props":4798,"children":4799},{"style":502},[4800],{"type":65,"value":1256},{"type":60,"tag":479,"props":4802,"children":4803},{"class":481,"line":3078},[4804],{"type":60,"tag":479,"props":4805,"children":4806},{"style":502},[4807],{"type":65,"value":1272},{"type":60,"tag":170,"props":4809,"children":4811},{"id":4810},"architecture-decision-framework",[4812],{"type":65,"value":4813},"Architecture Decision Framework",{"type":60,"tag":68,"props":4815,"children":4816},{},[4817,4822,4823,4828,4829,4834],{"type":60,"tag":81,"props":4818,"children":4819},{},[4820],{"type":65,"value":4821},"Server-Only",{"type":65,"value":1684},{"type":60,"tag":89,"props":4824,"children":4826},{"className":4825},[],[4827],{"type":65,"value":94},{"type":65,"value":2267},{"type":60,"tag":89,"props":4830,"children":4832},{"className":4831},[],[4833],{"type":65,"value":2265},{"type":65,"value":4835},"):",{"type":60,"tag":2174,"props":4837,"children":4838},{},[4839,4844,4849],{"type":60,"tag":2178,"props":4840,"children":4841},{},[4842],{"type":65,"value":4843},"Sensitive data (env vars, secrets)",{"type":60,"tag":2178,"props":4845,"children":4846},{},[4847],{"type":65,"value":4848},"Database connections, file system",{"type":60,"tag":2178,"props":4850,"children":4851},{},[4852],{"type":65,"value":4853},"External API keys",{"type":60,"tag":68,"props":4855,"children":4856},{},[4857,4862,4863,4868,4869,4874],{"type":60,"tag":81,"props":4858,"children":4859},{},[4860],{"type":65,"value":4861},"Client-Only",{"type":65,"value":1684},{"type":60,"tag":89,"props":4864,"children":4866},{"className":4865},[],[4867],{"type":65,"value":919},{"type":65,"value":2267},{"type":60,"tag":89,"props":4870,"children":4872},{"className":4871},[],[4873],{"type":65,"value":344},{"type":65,"value":4835},{"type":60,"tag":2174,"props":4876,"children":4877},{},[4878,4883,4888],{"type":60,"tag":2178,"props":4879,"children":4880},{},[4881],{"type":65,"value":4882},"DOM manipulation, browser APIs",{"type":60,"tag":2178,"props":4884,"children":4885},{},[4886],{"type":65,"value":4887},"localStorage, geolocation",{"type":60,"tag":2178,"props":4889,"children":4890},{},[4891],{"type":65,"value":4892},"Analytics\u002Ftracking",{"type":60,"tag":68,"props":4894,"children":4895},{},[4896,4901,4903,4909],{"type":60,"tag":81,"props":4897,"children":4898},{},[4899],{"type":65,"value":4900},"Isomorphic",{"type":65,"value":4902}," (default \u002F ",{"type":60,"tag":89,"props":4904,"children":4906},{"className":4905},[],[4907],{"type":65,"value":4908},"createIsomorphicFn",{"type":65,"value":4835},{"type":60,"tag":2174,"props":4911,"children":4912},{},[4913,4918,4923],{"type":60,"tag":2178,"props":4914,"children":4915},{},[4916],{"type":65,"value":4917},"Data formatting, business logic",{"type":60,"tag":2178,"props":4919,"children":4920},{},[4921],{"type":65,"value":4922},"Shared utilities",{"type":60,"tag":2178,"props":4924,"children":4925},{},[4926],{"type":65,"value":4927},"Route loaders (they're isomorphic by nature)",{"type":60,"tag":170,"props":4929,"children":4931},{"id":4930},"cross-references",[4932],{"type":65,"value":4933},"Cross-References",{"type":60,"tag":2174,"props":4935,"children":4936},{},[4937,4949],{"type":60,"tag":2178,"props":4938,"children":4939},{},[4940,4947],{"type":60,"tag":4941,"props":4942,"children":4944},"a",{"href":4943},"..\u002Fserver-functions\u002FSKILL.md",[4945],{"type":65,"value":4946},"start-core\u002Fserver-functions",{"type":65,"value":4948}," — the primary server boundary",{"type":60,"tag":2178,"props":4950,"children":4951},{},[4952,4958],{"type":60,"tag":4941,"props":4953,"children":4955},{"href":4954},"..\u002Fdeployment\u002FSKILL.md",[4956],{"type":65,"value":4957},"start-core\u002Fdeployment",{"type":65,"value":4959}," — deployment target affects execution",{"type":60,"tag":4961,"props":4962,"children":4963},"style",{},[4964],{"type":65,"value":4965},"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);}",{"items":4967,"total":5069},[4968,4987,5002,5018,5031,5050,5055],{"slug":4969,"name":4969,"fn":4970,"description":4971,"org":4972,"tags":4973,"stars":17,"repoUrl":18,"updatedAt":4986},"auth-and-guards","implement route protection in TanStack Router","Route protection with beforeLoad, redirect()\u002Fthrow redirect(), isRedirect helper, authenticated layout routes (_authenticated), non-redirect auth (inline login), RBAC with roles and permissions, auth provider integration (Auth0, Clerk, Supabase), router context for auth state.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[4974,4977,4980,4982,4983],{"name":4975,"slug":4976,"type":15},"Auth","auth",{"name":4978,"slug":4979,"type":15},"Frontend","frontend",{"name":4981,"slug":29,"type":15},"Routing",{"name":9,"slug":8,"type":15},{"name":4984,"slug":4985,"type":15},"TanStack Router","tanstack-router","2026-07-30T05:27:07.639032",{"slug":4988,"name":4988,"fn":4989,"description":4990,"org":4991,"tags":4992,"stars":17,"repoUrl":18,"updatedAt":5001},"auth-server-primitives","implement server-side authentication primitives","Server-side authentication primitives for TanStack Start: session cookies (HttpOnly, Secure, SameSite, __Host- prefix), session read\u002Fissue\u002Fdestroy via createServerFn and middleware, OAuth authorization-code flow with state and PKCE, password-reset enumeration defense, CSRF for non-GET RPCs, rate limiting auth endpoints, session rotation on privilege change. Pairs with router-core\u002Fauth-and-guards for the routing side.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[4993,4994,4997,5000],{"name":4975,"slug":4976,"type":15},{"name":4995,"slug":4996,"type":15},"OAuth","oauth",{"name":4998,"slug":4999,"type":15},"Security","security",{"name":9,"slug":8,"type":15},"2026-07-30T05:26:59.504396",{"slug":5003,"name":5003,"fn":5004,"description":5005,"org":5006,"tags":5007,"stars":17,"repoUrl":18,"updatedAt":5017},"code-splitting","configure code splitting in TanStack Router","Automatic code splitting (autoCodeSplitting), .lazy.tsx convention, createLazyFileRoute, createLazyRoute, lazyRouteComponent, getRouteApi for typed hooks in split files, codeSplitGroupings per-route override, splitBehavior programmatic config, critical vs non-critical properties.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[5008,5011,5012,5015,5016],{"name":5009,"slug":5010,"type":15},"Engineering","engineering",{"name":4978,"slug":4979,"type":15},{"name":5013,"slug":5014,"type":15},"Performance","performance",{"name":9,"slug":8,"type":15},{"name":4984,"slug":4985,"type":15},"2026-07-30T05:27:11.494406",{"slug":5019,"name":5019,"fn":5020,"description":5021,"org":5022,"tags":5023,"stars":17,"repoUrl":18,"updatedAt":5030},"data-loading","manage data loading in TanStack Router","Route loader option, loaderDeps for cache keys, staleTime\u002FgcTime\u002F defaultPreloadStaleTime SWR caching, pendingComponent\u002FpendingMs\u002F pendingMinMs, errorComponent\u002FonError\u002FonCatch, beforeLoad, router context and createRootRouteWithContext DI pattern, router.invalidate, Await component, deferred data loading with unawaited promises.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[5024,5027,5028,5029],{"name":5025,"slug":5026,"type":15},"Caching","caching",{"name":5013,"slug":5014,"type":15},{"name":9,"slug":8,"type":15},{"name":4984,"slug":4985,"type":15},"2026-07-30T05:26:54.487943",{"slug":5032,"name":5032,"fn":5033,"description":5034,"org":5035,"tags":5036,"stars":17,"repoUrl":18,"updatedAt":5049},"deployment","deploy TanStack Start applications","Deploy to Cloudflare Workers, Netlify, Vercel, Node.js\u002FDocker, Bun, Railway. Selective SSR (ssr option per route), SPA mode, static prerendering, ISR with Cache-Control headers, SEO and head management.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[5037,5040,5042,5045,5046],{"name":5038,"slug":5039,"type":15},"Cloudflare","cloudflare",{"name":5041,"slug":5032,"type":15},"Deployment",{"name":5043,"slug":5044,"type":15},"Netlify","netlify",{"name":9,"slug":8,"type":15},{"name":5047,"slug":5048,"type":15},"Vercel","vercel","2026-07-30T05:26:50.509927",{"slug":4,"name":4,"fn":5,"description":6,"org":5051,"tags":5052,"stars":17,"repoUrl":18,"updatedAt":19},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[5053,5054],{"name":13,"slug":14,"type":15},{"name":9,"slug":8,"type":15},{"slug":5056,"name":5056,"fn":5057,"description":5058,"org":5059,"tags":5060,"stars":17,"repoUrl":18,"updatedAt":5068},"middleware","implement TanStack Router middleware","createMiddleware, request middleware (.server only), server function middleware (.client + .server), context passing via next({ context }), sendContext for client-server transfer, global middleware via createStart in src\u002Fstart.ts, middleware factories, method order enforcement, fetch override precedence.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[5061,5064,5065,5067],{"name":5062,"slug":5063,"type":15},"Backend","backend",{"name":4978,"slug":4979,"type":15},{"name":5066,"slug":5056,"type":15},"Middleware",{"name":9,"slug":8,"type":15},"2026-07-30T05:26:58.546019",30,{"items":5071,"total":5209},[5072,5086,5098,5110,5123,5135,5145,5155,5168,5178,5189,5199],{"slug":5073,"name":5073,"fn":5074,"description":5075,"org":5076,"tags":5077,"stars":5083,"repoUrl":5084,"updatedAt":5085},"aggregation","perform data aggregation in TanStack Table","Aggregate TanStack Table columns independently of grouping, including grand totals, caller-selected row totals, multiple keyed aggregations, custom context-based definitions, grouped merges, manual values, and worker constraints.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[5078,5081,5082],{"name":5079,"slug":5080,"type":15},"Data Analysis","data-analysis",{"name":4978,"slug":4979,"type":15},{"name":9,"slug":8,"type":15},28175,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Ftable","2026-07-30T05:25:59.429787",{"slug":5087,"name":5087,"fn":5088,"description":5089,"org":5090,"tags":5091,"stars":5083,"repoUrl":5084,"updatedAt":5097},"api-not-found","diagnose TanStack Table API errors","Diagnose missing TanStack Table v9 exports, options, state slices, and instance methods. Load before inventing an API when code sees a type error, undefined feature method, absent object key, adapter mismatch, or v8-shaped example.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[5092,5095,5096],{"name":5093,"slug":5094,"type":15},"Debugging","debugging",{"name":4978,"slug":4979,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:26:05.418735",{"slug":5099,"name":5099,"fn":5100,"description":5101,"org":5102,"tags":5103,"stars":5083,"repoUrl":5084,"updatedAt":5109},"cell-selection","select rectangular cell ranges in tables","Select rectangular cell ranges with cellSelectionFeature: two-corner range state keyed by row and column id, mousedown\u002Fmouseenter handlers, selection edges, render-order resolution under pinning, and autoResetCellSelection. Load when ranges widen unexpectedly after sorting or column reordering, when a drag re-renders the whole table, or when building copy-to-clipboard from a selection.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[5104,5105,5106],{"name":5079,"slug":5080,"type":15},{"name":9,"slug":8,"type":15},{"name":5107,"slug":5108,"type":15},"UI Components","ui-components","2026-07-30T05:25:38.403427",{"slug":5111,"name":5111,"fn":5112,"description":5113,"org":5114,"tags":5115,"stars":5083,"repoUrl":5084,"updatedAt":5122},"client-vs-server","manage TanStack Table data pipelines","Choose client or server ownership for filtering, grouping, sorting, expanding, and pagination in TanStack Table v9. Load for manual* flags, mixed pipelines, server counts, or deciding which dataset each row-model stage receives.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[5116,5119,5120,5121],{"name":5117,"slug":5118,"type":15},"Data Pipeline","data-pipeline",{"name":4978,"slug":4979,"type":15},{"name":5013,"slug":5014,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:45.400104",{"slug":5124,"name":5124,"fn":5125,"description":5126,"org":5127,"tags":5128,"stars":5083,"repoUrl":5084,"updatedAt":5134},"column-faceting","build faceted filter UIs","Build faceted filter UIs with columnFacetingFeature, facetedRowModel, facetedUniqueValues, and facetedMinMaxValues. Load for facet counts, numeric ranges, own-filter exclusion, or server-page facet completeness.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[5129,5132,5133],{"name":5130,"slug":5131,"type":15},"Data Visualization","data-visualization",{"name":4978,"slug":4979,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:41.397257",{"slug":5136,"name":5136,"fn":5137,"description":5138,"org":5139,"tags":5140,"stars":5083,"repoUrl":5084,"updatedAt":5144},"column-filtering","implement column filtering in TanStack Table","Filter columns with columnFilteringFeature, filteredRowModel, filterFns, filterMeta, nested-row direction, and manualFiltering. Load for accessor compatibility, controlled filter updaters, fuzzy metadata, or client\u002Fserver ownership.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[5141,5142,5143],{"name":5079,"slug":5080,"type":15},{"name":4978,"slug":4979,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:53.391632",{"slug":5146,"name":5146,"fn":5147,"description":5148,"org":5149,"tags":5150,"stars":5083,"repoUrl":5084,"updatedAt":5154},"column-ordering","manage TanStack Table column ordering","Control TanStack Table v9 leaf columnOrder with stable IDs while accounting for pinning regions, visibility, and groupedColumnMode precedence. Load for drag-and-drop columns or rendered order that differs from state.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[5151,5152,5153],{"name":4978,"slug":4979,"type":15},{"name":9,"slug":8,"type":15},{"name":5107,"slug":5108,"type":15},"2026-07-30T05:26:03.37801",{"slug":5156,"name":5156,"fn":5157,"description":5158,"org":5159,"tags":5160,"stars":5083,"repoUrl":5084,"updatedAt":5167},"column-pinning","configure column pinning in TanStack Table","Pin columns into logical start, center, and end regions with columnPinningFeature and renderer-owned sticky CSS. Load for RTL offsets, z-index, backgrounds, overflow, widths, gaps, or overlaps.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[5161,5164,5165,5166],{"name":5162,"slug":5163,"type":15},"CSS","css",{"name":4978,"slug":4979,"type":15},{"name":9,"slug":8,"type":15},{"name":5107,"slug":5108,"type":15},"2026-07-30T05:25:55.377366",{"slug":5169,"name":5169,"fn":5170,"description":5171,"org":5172,"tags":5173,"stars":5083,"repoUrl":5084,"updatedAt":5177},"column-resizing","implement column resizing in TanStack Table","Wire columnResizingFeature, header.getResizeHandler, resize mode and direction, pointer or touch events, and performant CSS-variable updates. Load when resize state changes but widths do not, or large tables resize slowly.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[5174,5175,5176],{"name":4978,"slug":4979,"type":15},{"name":9,"slug":8,"type":15},{"name":5107,"slug":5108,"type":15},"2026-07-30T05:25:51.400011",{"slug":5179,"name":5179,"fn":5180,"description":5181,"org":5182,"tags":5183,"stars":5083,"repoUrl":5084,"updatedAt":5188},"column-sizing","configure column sizing in TanStack Table","Use columnSizingFeature numeric size, minSize, maxSize, getSize, getStart, getAfter, and total-size APIs in table, grid, or flex CSS. Load for auto or percentage misconceptions and sizing\u002Fpinning layout mismatch.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[5184,5185,5186,5187],{"name":5162,"slug":5163,"type":15},{"name":4978,"slug":4979,"type":15},{"name":9,"slug":8,"type":15},{"name":5107,"slug":5108,"type":15},"2026-07-30T05:25:48.703799",{"slug":5190,"name":5190,"fn":5191,"description":5192,"org":5193,"tags":5194,"stars":5083,"repoUrl":5084,"updatedAt":5198},"column-visibility","manage column visibility in TanStack Table","Hide columns with columnVisibilityFeature while rendering visibility-aware header, column, and cell collections. Load when hidden columns remain in the DOM, false-versus-absent state is confused, or enableHiding is misunderstood.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[5195,5196,5197],{"name":4978,"slug":4979,"type":15},{"name":9,"slug":8,"type":15},{"name":5107,"slug":5108,"type":15},"2026-07-30T05:25:47.367943",{"slug":5200,"name":5200,"fn":5201,"description":5202,"org":5203,"tags":5204,"stars":5083,"repoUrl":5084,"updatedAt":5208},"core","build data grids with TanStack Table","Use TanStack Table v9 as a headless data-grid state and row-processing engine. Load for first-table architecture, stable data and columns, row numbering with getDisplayIndex, semantic rendering, framework adapter choice, or deciding what Table owns versus the renderer.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[5205,5206,5207],{"name":5079,"slug":5080,"type":15},{"name":4978,"slug":4979,"type":15},{"name":5107,"slug":5108,"type":15},"2026-07-30T05:25:52.366295",125]