react-lazy-hydration

import React from 'react'; import LazyHydrate from 'react-lazy-hydration'; function MyHeader() { return <h1 className="text-3xl font-bold underline">Hello, Lazy Hydration!</h1>; } function MyContent() { const [count, setCount] = React.useState(0); return ( <div className="my-4 p-4 border rounded"> <p>This content is hydrated.</p> <button onClick={() => setCount(c => c + 1)} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Count: {count} </button> </div> ); } function App() { return ( <div className="container mx-auto p-4"> {/* This component will only be rendered on the server and never hydrated on the client. */} <LazyHydrate ssrOnly> <MyHeader /> </LazyHydrate> {/* This component will hydrate only when it becomes visible in the viewport. */} <LazyHydrate whenVisible={{ rootMargin: '200px' }}> <MyContent /> </LazyHydrate> {/* This component will hydrate when the browser is idle. */} <LazyHydrate whenIdle> <p className="my-2 text-gray-600">This will hydrate during browser idle time.</p> <button onClick={() => console.log('Idle button clicked')} className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"> Idle Action </button> </LazyHydrate> {/* This component will hydrate on specific user events (click, mouseenter). */} <LazyHydrate on={['click', 'mouseenter']}> <p className="my-2 text-gray-600">Click or hover to hydrate this section.</p> </LazyHydrate> </div> ); } export default App;