22d (edited) • Problems and Solutions
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:
- this combination makes sense, if loading time is very prioritized
- it's a good solution for SEO centralized interactive applications
- 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>
```
1
4 comments
the usage of Qwik with Astro should be used limited
powered by
skool.com/web-dev-dschungelfuhrer-2591
Discussions, problem solving, tutorials, courses and news about web development and related topics (JavaScript, HTML/CSS; React, Alpine.js, VueJs)
Suggested communities
Powered by