mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 04:23:02 +00:00
Tomas Dvorak
17 lines
2.6 KiB
JSON
17 lines
2.6 KiB
JSON
{
|
||
"id": "274b913dda7235c1f68b7877",
|
||
"source": "solid:signals",
|
||
"type": "github-document",
|
||
"title": "preload-data",
|
||
"content": "---\ntitle: \"Preload data\"\n---\n\nPreloading data improves perceived performance by fetching the data for an upcoming page before the user navigates to it.\n\nSolid Router initiates preloading in two scenarios:\n\n- When a user indicates intent to navigate to the page (e.g., by hovering over a link).\n- When the route's component is rendering.\n\nThis ensures data fetching starts as early as possible, often making data ready once the component renders.\n\nPreloading is configured using the [`preload`](/solid-router/reference/preload-functions/preload) prop on a [`Route`](/solid-router/reference/components/route).\nThis prop accepts a function that calls one or more queries.\nWhen triggered, the queries execute and their results are stored in a short-lived internal cache.\nOnce the user navigates and the destination route’s component renders, any `createAsync` calls within the page will consume the preloaded data.\nThanks to the [deduplication mechanism](#deduplication), no redundant network requests are made.\n\n```tsx {18-20,27}\nimport { Show } from \"solid-js\";\nimport { Route, query, createAsync } from \"@solidjs/router\";\n\nconst getProductQuery = query(async (id: string) =\u003e {\n\t// ... Fetches product details for the given ID.\n}, \"product\");\n\nfunction ProductDetails(props) {\n\tconst product = createAsync(() =\u003e getProductQuery(props.params.id));\n\n\treturn (\n\t\t\u003cShow when={product()}\u003e\n\t\t\t\u003ch1\u003e{product().name}\u003c/h1\u003e\n\t\t\u003c/Show\u003e\n\t);\n}\n\nfunction preloadProduct({ params }: { params: { id: string } }) {\n\tgetProductQuery(params.id);\n}\n\nfunction Routes() {\n\treturn (\n\t\t\u003cRoute\n\t\t\tpath=\"/products/:id\"\n\t\t\tcomponent={ProductDetails}\n\t\t\tpreload={preloadProduct}\n\t\t/\u003e\n\t);\n}\n```\n\nIn this example, hovering a link to `/products/:id` triggers `preloadProduct`.\nWhen the `ProductDetails` component renders, its `createAsync` call will instantly resolve with the preloaded data.",
|
||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/data-fetching/how-to/preload-data.mdx",
|
||
"metadata": {
|
||
"path": "src/routes/solid-router/data-fetching/how-to/preload-data.mdx",
|
||
"repo": "solidjs/solid-docs",
|
||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||
"size": 1861,
|
||
"source_type": "github"
|
||
},
|
||
"hash": "a596381d154fea802597ae41b649cc9bbb13a756d98f7cc6873ac0e57d1f2127",
|
||
"timestamp": "2026-02-23T11:43:00.191941372+01:00"
|
||
} |