React Lazy Hydration

Lazy Hydration for Server Rendered React Components

Installation

npm i react-lazy-hydration

OR

yarn add react-lazy-hydration

Usage

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>
    </div>
  );
}

Hook!

import React from "react";
import { useLazyHydration } from "react-lazy-hydration";

import Mycomponent from "...";

function App() {
  const [LazyComponent, hydrated] = useLazyHydration(MyComponent, {
    ssrOnly: true /*,
    whenVisible: false,
    whenIdle: false */
  });

  return (
    <div>
      <LazyComponent />
    </div>
  );
}

Notes

Based on this comment

and heavily adapted from Lazy hydration for Vue SSR

Contribute

First off, thanks for taking the time to contribute! Now, take a moment to be sure your contributions make sense to everyone else.

Reporting Issues

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.

Submitting pull requests

Pull requests are the greatest contributions, so be sure they are focused in scope, and do avoid unrelated commits.