ls partial-hydration/
Partial Hydration with Clerk
React 19 lets components become interactive independently, without waiting for the whole page. Each demo isolates a different pattern and its trade-offs with Clerk's auth hooks and components.
what is partial hydration?
Partial hydration lets pieces of the UI hydrate and become interactive on their own, instead of blocking on the entire page. Clerk's client hooks can light up immediately while slow Server Components are still streaming, which improves perceived performance when some parts of a route are slow to render.
- slow rsc blockingslow Server Components (2-3s) create loading states but don't block client hydration
- independent hooksuseAuth, useSession, useUser, useClerk hydrate independently and become interactive at once
- suspending parentswhat happens when a Clerk component sits inside a client parent that suspends via use()
Why these patterns matter
performance
- · faster time-to-interactive for critical auth UI
- · better experience on slow networks
- · auth components load independently from data
- · users can interact before everything loads
trade-offs
- · when components block vs. hydrate independently
- · how Suspense boundaries affect rendering
- · RSC vs. client component interactions
- · where to place boundaries for the best result