You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Fresh supports client-side navigation via f-client-nav and Partials, but there's no built-in mechanism for prefetching upcoming navigations. Frameworks like Next.js (<Link prefetch>), Remix (<Link prefetch="intent">), and Astro (prefetch) all provide this, and it makes a noticeable difference in perceived performance.
Currently, the only workaround is manually adding <link rel="prefetch" href="..."> inside <Head>, which is static and doesn't respond to user intent.
Proposed Solution
Add prefetching support, potentially via one or more of these approaches:
1. prefetch attribute on <a> tags (within f-client-nav)
Extend the client-side navigation system to support a f-prefetch attribute:
hover (default) — prefetch when the user hovers over the link (similar to instant.page)
viewport — prefetch when the link enters the viewport (via IntersectionObserver)
load — prefetch immediately on page load
none — opt out (useful when a parent sets a default)
2. Container-level default
Allow setting a default prefetch strategy on the f-client-nav container:
<navf-client-navf-prefetch="hover"><!-- All links in here prefetch on hover by default --><ahref="/about">About</a><ahref="/heavy-page" f-prefetch="none">Heavy Page</a></nav>
Implementation considerations
Prefetched responses should work with the Partials system — prefetch the partial HTML, not the full page
Use <link rel="prefetch"> injection or fetch() with low priority depending on browser support
Problem
Fresh supports client-side navigation via
f-client-navand Partials, but there's no built-in mechanism for prefetching upcoming navigations. Frameworks like Next.js (<Link prefetch>), Remix (<Link prefetch="intent">), and Astro (prefetch) all provide this, and it makes a noticeable difference in perceived performance.Currently, the only workaround is manually adding
<link rel="prefetch" href="...">inside<Head>, which is static and doesn't respond to user intent.Proposed Solution
Add prefetching support, potentially via one or more of these approaches:
1.
prefetchattribute on<a>tags (withinf-client-nav)Extend the client-side navigation system to support a
f-prefetchattribute:Strategies:
hover(default) — prefetch when the user hovers over the link (similar to instant.page)viewport— prefetch when the link enters the viewport (via IntersectionObserver)load— prefetch immediately on page loadnone— opt out (useful when a parent sets a default)2. Container-level default
Allow setting a default prefetch strategy on the
f-client-navcontainer:Implementation considerations
<link rel="prefetch">injection orfetch()with low priority depending on browser supportSave-Dataheader /navigator.connection.saveDatacache()middleware (feat: add cache() middleware for server-side response caching #3782) — prefetched responses benefit from server-side cachingAlternatives considered
<Head>injection — works but static, no intent-based prefetching