Tag: Software Engineering

A layered data-fetching strategy that makes apps feel instant — explained through a kitchen analogy anyone can follow.

We’ve all been there — you tap a button in an app and stare at a spinning loader for three full seconds. The data was right there on the server. So why the wait?

This post breaks down a layered data-fetching strategy that makes apps feel instant — using a simple kitchen analogy anyone can follow.

The Problem With “On-Demand” Fetching

Imagine a restaurant where the chef only starts cooking after you sit down, read the menu, and place your order. Every customer waits. Every time. No prep, no anticipation — just a cold kitchen that springs to life the moment you ask.

That’s how most basic apps work:

// naive on-demand pattern
User clicks button
  → fetch('/api/data')   // request leaves NOW
  → network round-trip  // 200–800ms
  → server queries DB   // 50–300ms
  → response arrives
  → UI finally renders  // user waited the whole time

The real cost

On a fast connection this might be 300ms. On mobile 3G it’s easily 2 seconds. Every millisecond of perceived wait costs engagement — Google found a 0.5s slowdown reduced searches by 20%.

Meet the Kitchen Strategy

A real restaurant kitchen doesn’t work like that. It has three layers of readiness that let it serve dishes fast even during a dinner rush. Modern high-performance apps mirror this almost exactly.

Layer 1: The Prep Cook (Prefetching)

A prep cook arrives hours before service. They chop vegetables, portion proteins, reduce sauces. When a ticket comes in, the line cook isn’t starting from raw ingredients — most of the work is done.

🧊Kitchen Analogy

Prep cook = your app fetching the next page’s data while the user is still reading the current one.

In practice, this means starting data requests before the user explicitly triggers them. Common patterns:

• Route prefetching. Next.js prefetches linked pages when <Link> enters the viewport. By the time the user clicks, the JS bundle and data are already loading.
• Hover prefetch. Start fetching on mouseenter— you typically get 100–300ms of head start before the click fires.
• Predictive prefetch. If 80% of users who visit page A next go to page B, prefetch B proactively for all page-A visitors.

// hover prefetch pattern
function ProductCard({ id }: { id: string }) {
  const queryClient = useQueryClient();


const prefetch = () => {
    queryClient.prefetchQuery({
      queryKey: ['product', id],
      queryFn: () => fetchProduct(id),
      staleTime: 30_000,
    });
  };
return <div onMouseEnter={prefetch}>...</div>;
}

Layer 2: The Walk-In Fridge (Caching)

The walk-in fridge stores prepped ingredients. When a ticket comes in for a dish you’ve made twenty times today, you pull from the fridge — you don’t call the supplier every single time.

🧊Kitchen Analogy

Walk-in fridge = cached API responses. Fresh enough to serve, fast enough to skip the round-trip.

Caching is about answering the question: how fresh does this data actually need to be? Most data in most apps can tolerate a few seconds — or minutes — of staleness. The key insight is to serve stale data immediately while revalidating in the background.

💡 Stale-While-Revalidate

Serve the cached (stale) response immediately so the user sees content at once, then fetch fresh data in the background. When the new data arrives, swap it in — no visible loading state at all. React Query and SWR implement this out of the box.

Layer 3: The Pass Window (Optimistic UI)

In a fast kitchen, the expeditor calls out a dish at the pass window the moment it’s plated — before every garnish is technically confirmed. The assumption is it’s correct. If something’s wrong, they pull it back. But 95% of the time, it goes straight to the customer.

🪟Kitchen Analogy

Pass window = optimistic UI. Show the result immediately, roll back if the server disagrees.

Optimistic updates apply the change to the UI instantly — before the server has even acknowledged the request. If the server returns an error, you roll back. This pattern is most effective for:

• Likes / reactions — the heart fills immediately on click.
• Todo toggles — the checkbox flips before the PATCH lands.
• Message send — the message appears in the thread while the POST is in-flight.

// optimistic mutation with React Query
const mutation = useMutation({
  mutationFn: (id: string) => likePost(id),

  onMutate: async (id) => {
    await queryClient.cancelQueries({ queryKey: ['posts'] });
    const prev = queryClient.getQueryData(['posts']);
    queryClient.setQueryData(['posts'], (old) => 
      old.map(p => p.id === id ? { ...p, likes: p.likes + 1 } : p)
    );
    return { prev };  // snapshot for rollback
  },

  onError: (err, id, ctx) => {
    queryClient.setQueryData(['posts'], ctx?.prev);  // rollback
  },
});

Putting It All Together

These three layers aren’t mutually exclusive — a real app uses all three simultaneously, each handling a different scenario:

• Prefetching eliminates wait when the user navigates. They arrive at a page with data already there.
• Caching eliminates redundant requests. Revisiting a page or switching tabs feels instantaneous.
• Optimistic UI eliminates perceived latency on mutations. Actions feel local even when they hit a remote server.

The kitchen insight: a great restaurant kitchen is fast not because the chefs move faster — it’s because the work is distributed across time. Prep happens early. Stock sits ready. The pass window moves without waiting for a full audit.

Fast apps work the same way. The goal isn’t a faster network — it’s doing less work at the moment the user is watching.

When Each Layer Falls Short

No strategy is free. Knowing the failure modes helps you apply them correctly:

The most common mistake is applying optimistic UI to destructive operations (delete, payment) where an error leaves the user in a confusing state. Reserve it for low-stakes, high-frequency actions where a rollback would be a minor annoyance, not a crisis.

Speed isn’t just a technical metric — it’s the primary UX of any data-heavy app. A spinner is a broken promise. The kitchen strategy is about making promises you can keep: data that’s there before the user reaches for it, interactions that feel local, and fetches that happen in the margin, not in the critical path.

The next time you open an app and it feels like a native tool rather than a website, look closer — there’s a well-run kitchen behind the counter.