mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 04:23:02 +00:00
Tomas Dvorak
17 lines
3.5 KiB
JSON
17 lines
3.5 KiB
JSON
{
|
|
"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"
|
|
} |