Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add info about Link prefetch option #6814

Merged
merged 1 commit into from
Aug 21, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions packages/docs/src/routes/docs/(qwikcity)/api/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -453,3 +453,38 @@ export default component$(() => {
);
});
```

### Prefetch

Whether Qwik should prefetch and cache the target page of this `Link`, this includes invoking any `routeLoader$`, `onGet`, etc.

This **improves UX performance** for client-side (**SPA**) navigations.

Prefetching occurs when a the Link enters the viewport in production (`on:qvisibile`), or with `mouseover`/`focus` during dev.

Prefetching will not occur if the user has the **data saver** setting enabled.

Setting this value to `"js"` will prefetch only javascript bundles required to render this page on the client, `false` will disable prefetching altogether.

> Warning: if you have a menu with many links, all of them will be loaded immediately when you enter the production page, which may result with too many requests

```tsx
import { component$ } from '@builder.io/qwik';
import { Link } from '@builder.io/qwik-city';

export default component$(() => {
return (
<div>
<Link href="/a" prefetch={false}>
page will not be prefetched
</Link>
<Link href="/b" prefetch="js">
page js will be prefetched
</Link>
<Link href="/c">
page content & js will be prefetched
</Link>
</div>
);
});
```