Advanced Performance: Implementing 'Lazy Hydration' in Large Scale SSR Apps

Lazy hydration delays the client-side JavaScript execution for specific components until a trigger (like 'visible' or 'interaction') is met.

In a standard SSR app, the browser hydratesthe whole page at once, which blocks the main thread (Total Blocking Time). Architecturally, you can split components into 'Islands'. A 'Footer' or 'Off-screen Comment Section' shouldn't hydrate until the user scrolls to it. This is achieved by using a wrapper component that uses IntersectionObserver to conditionally trigger the hydration process.