How to fetch on hover like SvelteKit in Next.js

Question

I wrote a site in SvelteKit and the navigation between pages felt really fast because, SvelteKit on hover, runs the load functions of the pages, downloads everything to the client and on click, it goes to the next page instantaneously.

Now, I am rewriting the same site in Next.js and what Next.js does is, when some Link comes in viewport, it downloads some JavaScript bundle and route information etc and only when the link is clicked, the server components are run and sent to the client.

The load functions and server components fetch data from an API and it is somewhat slow. But SvelteKit hides this slowness as it starts the API fetch on hover. There is like 200 ms delay between hover and click for most users and this is enough time for data to be downloaded from the API and sent to client. In Next.js, the server components start the fetch only after a route is requested and it feels noticeably slow. On top of that, some pages have a lot of links (like 50) and the end user will navigate to only one of them. So, it feels like the fetched data and bandwidth are wasted.

So, can I replicate sveltekit's behaviour of fetching everything needed for the route to the client on hover?

PS: I am running everything on SSR by node adapters, no edge. I also have NODE_ENV set to "production" and I run the server using npm run start.

Update: I have updated the docker file to not run the server using npm run start but using node server.js using the instructions here. But the problem remains. Only after I click, I get the payload from the server whereas in SvelteKit, I get the payload to the client on hover.

Oscar Hermoso · Accepted Answer · 2025-05-28 04:13:32Z

2

import Link from 'next/link'
 
export default function Home() {
  return (
    <Link href="/dashboard" prefetch="hover">
      Dashboard
    </Link>
  )
}

You can set the prefetch option on links to "hover".

Pages router:

https://nextjs.org/docs/pages/api-reference/components/link#prefetch

App router:

https://nextjs.org/docs/app/api-reference/components/link#prefetch

edited May 28 at 4:13

answered May 26 at 10:15

Oscar Hermoso

5153 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

berinaniesh May 26 at 23:49

Yeah, prefetch on hover. Added that at the end as an after thought (like, SvelteKit's system is arguably better than Next.js'). The primary concern is running server components on hover and downloading them to the client. Thanks for the answer though.

Oscar Hermoso May 28 at 4:18

Could you provide some minimal code that we could use to reproduce the issue (like a StackBlitz link)?

berinaniesh May 28 at 7:37

Here you go @oscar-hermoso stackblitz.com/edit/stackblitz-starters-kcww8cpp. According to Next.js' documentation, prefetching works only in production environments. Everything's already configured for standalone deployment. Clone on your machine, run npm i && npm run build, then cd .next/standalone and run NODE_ENV=production node server.js to reproduce.

berinaniesh · Accepted Answer · 2025-08-14 08:59:36Z

Seems, this behaviour of SvelteKit is not replicable in NextJS. There is a similar feature in NextJS and it is called prerendering. But, prerendering only works for static pages.

For dynamic pages, the server components start to render on the server only after the page is navigated to. If needed, a suspense boundary can be used as a placeholder (which is displayed instantly) before the whole page is rendered.

With respect to wasted bandwidth of fetching links when it comes into viewport, @oscar-hermoso's answer of switching the prefetch option to on hover works.

After using both the frameworks, it feels as if SvelteKit is really thought out when it comes to frameworks. NextJS relies on CDN to make the site fast. SvelteKit uses a simple, but clever trick. So, when end users use the site, the SvelteKit version feels much faster.

Collectives™ on Stack Overflow

How to fetch on hover like SvelteKit in Next.js

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related