Production-only stale data issue on Vercel - works correctly with refr

Help
1

Bug Description

I’m experiencing a production-only issue on Vercel where pages sometimes load with stale server data after navigation. The same flow works perfectly in development and manual refresh always loads the correct data.

Steps to Reproduce

  1. Deploy to Vercel production
  2. Navigate to a page (e.g., cart/negotiation page)
  3. Make changes to the data (add items, edit fields)
  4. Navigate away from the page
  5. Navigate back to the same page
  6. Sometimes the page loads with old server data (ignoring previous changes)
  7. Manual refresh → Always loads correct/updated data
  8. Development mode → Always works correctly

Expected Behavior

Page should load with current server data, just like it does with manual refresh and in development.

Actual Behavior

Production-only inconsistent behavior: Sometimes the server appears to return stale data during navigation, but manual refresh always returns fresh data.

Environment

  • Next.js: 15.2.3
  • React: 19.0.0
  • App Router: Yes
  • Zustand: 4.5.5
  • Deployment: Vercel (issue only in production)

Code Structure

// Page component
export const dynamic = 'force-dynamic'
export const maxDuration = 60

export default async function Page(props: { params: Promise<{ id: string }> }) {
  const params = await props.params
  const cart = await getCartById(params.id) // Server action
  
  return (
    <CartStoreProvider initValue={{ cart, diffs: [] }}>
      <Cart />
    </CartStoreProvider>
  )
}

// Server action
export async function getCartById(id: string) {
   const response = await fetch(`${baseUrl}/carts/${encodeURIComponent(id)}`, {
      method: "GET",
      headers: {
        "Authorization": token,
        "Cache-Control": "no-store, max-age=0",
        "Pragma": "no-cache",
        "Content-Type": "application/json",
      },
      cache: "no-store",
    });
  
  const cart = await client.cart.GetCart(id)
  return cart
}

// Simplified Zustand provider
export const CartStoreProvider = ({ children, initValue }) => {
  const storeRef = useRef<CartStoreApi | undefined>(undefined)
  
  if (!storeRef.current) {
    storeRef.current = createCartStore(initValue)
  }
  
  useEffect(() => {
    // This always runs and updates store with server data
    storeRef.current?.setState(initValue)
  }, [initValue])

  return (
    <CartStoreContext.Provider value={storeRef.current}>
      {children}
    </CartStoreContext.Provider>
  )
}