Lazy Hydration for Server Rendered React Components
npm i react-lazy-hydration
OR
yarn add react-lazy-hydration
import React from "react"; import LazyHydrate from "react-lazy-hydration"; function App() { return ( <div> {/* Skip Hydrating */} <LazyHydrate ssrOnly> {...} </LazyHydrate> {/* Requires IntersectionObserver. Polyfill not included. */} <LazyHydrate whenVisible> {...} </LazyHydrate> {/* Requires requestIdleCallback. Polyfill not included. */} <LazyHydrate whenIdle> {...} </LazyHydrate> {/* Hydrate on any of the following events */} <LazyHydrate on="click" /*OR on={["click","mouseenter",...]} */> {...} </LazyHydrate> </div> ); }
Based on this comment
and heavily adapted from Lazy hydration for Vue SSR
First off, thanks for taking the time to contribute! Now, take a moment to be sure your contributions make sense to everyone else.
Found a problem? Want a new feature? First of all see if your issue or idea has already been reported. If not, just open a new clear and descriptive issue.
Pull requests are the greatest contributions, so be sure they are focused in scope, and do avoid unrelated commits.