the usage of Qwik with Astro should be used limited
so i've tested qwik with astro for todo list, how it works seamesously, in the end i think there are two difference approach how it works in nutshell: 1. this combination makes sense, if loading time is very prioritized 2. it's a good solution for SEO centralized interactive applications 3. routing on qwik approach (with prefetch), needs to be developed by your own, which is included in "qwik city" here an example of routing link.tsx ``` import { component$, PropFunction, useSignal } from '@builder.io/qwik'; type PrefetchMode = 'none' | 'hover' | 'always'; export const SmartLink = component$((props: { href: string; class?: string; prefetch?: PrefetchMode; // 'hover' is typical onClick$?: PropFunction<(e: MouseEvent) => void>; }) => { const prefetched = useSignal(false); const prefetch = () => { if (prefetched.value || props.prefetch === 'none') return; prefetched.value = true; const link = document.createElement('link'); link.rel = 'prefetch'; link.href = props.href; link.as = 'document'; document.head.appendChild(link); }; return ( <a href={props.href} class={props.class} onMouseEnter$={() => props.prefetch === 'hover' && prefetch()} onFocus$={() => props.prefetch === 'hover' && prefetch()} onQVisible$={() => props.prefetch === 'always' && prefetch()} onClick$={props.onClick$} > <slot /> </a> ); }); ``` index.astro ``` --- import { SmartLink } from '../components/link'; --- <nav> <SmartLink href="/about" prefetch="hover" client:load>About</SmartLink> <SmartLink href="/pricing" prefetch="hover" client:load>Pricing</SmartLink> </nav> ```