A page can load quickly and still feel unstable.

That usually happens when the initial render strategy is fine, but client-side data updates are handled poorly.

In this article, we’ll compare two common approaches:

A basic useEffect fetch

A production-ready pattern using TanStack Query

Both fetch the same API under the same network conditions.

One flickers.

The other stays smooth.

The Experiment

I built a small Next.js Rendering Lab to visualize:

SSR

CSR

SSG

ISR

Hydration

Cached background refetching

UI flicker caused by naive fetching

Both components:

call the same endpoint

refetch every few seconds

run under throttled network conditions

display live telemetry

Naive useEffect Fetching

A common pattern looks like this:

useEffect (() => { setLoading ( true );

fetch ( " /api/data " ) . then (( res ) => res . json ()) .…