Prashuk Jain | Full Stack Developer

Hey everyone, Prashuk here.

If you’ve been following my work, you know I’m obsessed with one thing: speed. Not just "benchmark speed," but that snappy, instant feeling where a user clicks a link and the page is just there.

We’ve all built apps where the logic is solid, the UI looks great, but as soon as you click a button, you're staring at a loading spinner for two seconds. It kills the vibe. In my experience, if a user has to wait, you’ve already lost a bit of their trust.

Today, I want to talk about how I handle data prefetching in Next.js to make transitions feel instant.

1. The "Standard" Prefetching (and why it isn't enough)

By default, Next.js is pretty smart. If you use the <Link> component, it prefetches the code for the linked page when it enters the viewport. This is cool for small sites, but it only prefetches the JavaScript, not your dynamic data from the database.

I ran into this issue when I was building a high-traffic e-commerce dashboard. The pages loaded fast, but the tables stayed empty with "Loading..." skeletons for a second while the API caught up. It felt janky.

What worked for me was moving beyond the defaults and taking control of the data layer ourselves.

2. Prefetching on Hover (The Game Changer)

This is my favorite trick. Think about it: a user usually hovers over a link for 200–300ms before they actually click it. That’s a massive window of time we can use to start fetching data.

In one of my projects, a real estate listing app, I implemented a custom onMouseEnter trigger. The moment the user's mouse touched the listing card, I triggered a query fetch in the background. By the time they finished the click, the data was already sitting in the cache.

3. Using TanStack Query for the Win

If you're using the MERN stack or just Next.js with an API, TanStack Query (React Query) is basically a cheat code for this.

Instead of waiting for the new page component to mount and run a useEffect, you can use the prefetchQuery method.

Here’s a practical look at how I usually set this up:

import { useQueryClient } from '@tanstack/react-query';
import Link from 'next/link';

const ProductCard = ({ product }) => {
  const queryClient = useQueryClient();

  const prefetchProductData = async () => {
    // This starts fetching the data before the user even clicks!
    await queryClient.prefetchQuery({
      queryKey: ['product', product.id],
      queryFn: () => fetchProductDetails(product.id),
      staleTime: 60000, // Keep it fresh for 1 minute
    });
  };

  return (
    <div onMouseEnter={prefetchProductData}>
      <Link href={`/product/${product.id}`}>
        <h3>{product.name}</h3>
      </Link>
    </div>
  );
};

Honestly, implementing this one small change made the app feel 2x faster without actually changing the API speed at all.

4. Router Events for Global Loading States

Sometimes, you can't prefetch everything. Maybe the user is on mobile (no hover) or the data is too heavy.

What I do here is use the Next.js router events to trigger a top-bar progress indicator (like NProgress). It doesn't make the data load faster, but it gives the user immediate feedback that the app is responding. UI is 50% psychology. If the user sees a progress bar the millisecond they click, they perceive the wait time as shorter.

5. Don’t Prefetch Everything (The "Opinionated" Part)

Here is where I might differ from some "theory-heavy" docs: Stop trying to prefetch the whole database.

I’ve seen devs try to prefetch every link on a page at once. All you’re doing is killing your user's data plan and putting unnecessary load on your server.

My rule of thumb:

Prefetch on hover for desktop.
Only prefetch the "most likely" next step (like the first 3 items in a list).
Always check if the user is on a "slow 3g" connection before firing off background requests.

My Best Practices Summary

Be Intentional: Use prefetch={false} on the Next.js <Link> if you’re handling data manually to avoid double-fetching.
Cache Smartly: Set a reasonable staleTime so you aren’t re-fetching data the user just looked at 5 seconds ago.
Clean Code over Clever Code: Don't wrap every single link in complex prefetching logic. Start with your most-visited routes.

Conclusion

The difference between a "good" app and a "premium" app is often just how it handles the gaps between pages.

By using hover-based prefetching and TanStack Query, I’ve been able to eliminate those annoying "empty state" flashes in almost all my recent projects. It makes the UI feel solid and professional.

Give it a shot in your next project. Trust me, once you see that instant transition, you'll never go back to standard loading spinners.

Keep coding, Prashuk