{
  "id": "98c8929c207f4d94101e6b04",
  "source": "solid:signals",
  "type": "github-document",
  "title": "preload",
  "content": "---\ntitle: preload\nuse_cases: \u003e-\n  route preloading, hover prefetch, parallel loading, performance optimization,\n  lazy routes, code splitting\ntags:\n  - preload\n  - performance\n  - routing\n  - prefetch\n  - lazy\n  - optimization\nversion: '1.0'\ndescription: \u003e-\n  Preload route data and code in parallel to eliminate waterfalls. Enable hover\n  prefetching for instant page transitions.\n---\n\nThe `preload` function is a property on a route definition that initiates data fetching before a user navigates to the route.\n\n`preload` runs in two separate phases:\n\n- **Preload phase:**\n  Triggered by user intent (e.g., hovering over a link), the function is called to initiate data fetching.\n- **Rendering phase:**\n  Triggered by actual navigation, the function is called a second time to provide the fetched data to the component.\n\n## Import\n\n```tsx\nimport { Route } from \"@solidjs/router\";\n```\n\n## Type\n\n```tsx\ntype RoutePreloadFunc\u003cT = unknown\u003e = (args: RoutePreloadFuncArgs) =\u003e T;\n\ninterface RoutePreloadFuncArgs {\n\tparams: Params;\n\tlocation: Location;\n\tintent: \"initial\" | \"native\" | \"navigate\" | \"preload\";\n}\n```\n\n## Parameters\n\n### `params`\n\n- **Type:** `Params`\n\nAn object containing the parameters for the matched route.\nIt corresponds to the value returned by the [`useParams` primitive](/solid-router/reference/primitives/use-params).\n\n### `location`\n\n- **Type:** `Location`\n\nThe router's location object for the destination URL.\nIt corresponds to the value returned by the [`useLocation` primitive](/solid-router/reference/primitives/use-location).\n\n### `intent`\n\n- **Type:** `\"initial\" | \"native\" | \"navigate\" | \"preload\"`\n\nA string indicating the context in which the function is called.\n\n- `\"preload\"`:\n  The function is running to initiate data fetching.\n- `\"navigate\"`:\n  The function is running during navigation to the route.\n- `\"initial\"`:\n  The function is running for the first route on page load.\n\n## Return value\n\nThe value returned by `preload` is passed to the route's component as the `data` prop.\n\n- In the **preload phase** (`intent: \"preload\"`), the return value is **ignored**.\n- In the **rendering phase** (`intent: \"navigate\"` or `\"initial\"`), the return value is **captured** and provided to the component.\n\n## Examples\n\n```tsx\nimport { Route, query, createAsync } from \"@solidjs/router\";\n\nconst getProductQuery = query(async (id: string) =\u003e {\n\t// ... Fetches a product from the server.\n}, \"product\");\n\nfunction ProductPage(props) {\n\tconst product = createAsync(() =\u003e getProductQuery(props.params.id));\n\n\treturn \u003cdiv\u003e{product()?.title}\u003c/div\u003e;\n}\n\nfunction preloadData({ params }) {\n\tgetProductQuery(params.id);\n}\n\nfunction ProductRoutes() {\n\treturn (\n\t\t\u003cRoute path=\"/products/:id\" component={ProductPage} preload={preloadData} /\u003e\n\t);\n}\n```",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/preload-functions/preload.mdx",
  "metadata": {
    "path": "src/routes/solid-router/reference/preload-functions/preload.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 2764,
    "source_type": "github"
  },
  "hash": "9939f06078ba970abd08af0b8569f3351e45b9c2b87a264289ba66cc42d1bcd1",
  "timestamp": "2026-02-23T11:43:00.192925211+01:00"
}