Hydration not starting until user attempts to interact with the page

[gensc004]

Hello there NextJS Community! My team and I are experiencing some intermittent/inconsistent behavior with hydrating our client components in the browser on load, and I have been unsuccessful figuring out what could be causing it.

Setup Overview

• NextJS 14.2.3 using App Router
• A Dynamic search route using searchParams to generate pages that revalidate every 30 minutes
• The server renders most of the page, including the header, footer, and initial states for the search results. The client should then hydrate the client components to finish rendering the interactive elements

Problem

Locally, and for some users all the time, the static content renders, the browser hydrates the content instantly, and all is good. Randomly (it seems), and for some users all the time on Prod, the static content renders, and the browser does NOT hydrate. This leaves the page in its loading state with skeletons forever until a user clicks anywhere on the page. That interaction seems to kick off the hydration, and the page renders correctly.

Any ideas on what might be happening, or how we could go about fixing this?

[shinyruo-nmsl]

I think this is a very common question. After hydration failure, why can the page continue to render after user interaction? Why hasn't anyone told us why?