React lazy hydration render

Small library to improve hydration performance in SSR apps. It is based on a lazy hydration approach.

Small only 600 bytes (minified and gzipped)
Improves TTI do not waste CPU on what the user does not see
Customize. component activation mechanism can be changed

More about lazy hydration

Install

npm i --save react-lazy-hydration-render

yarn add react-lazy-hydration-render

This library is using IntersectionObserver API. if you need to support older browsers, you should install intersection-observer polyfill in order for it to work.

Usage

Default mode

Component is activated when user scrolls to it.

import React from 'react';
import { LazyRender } from 'react-lazy-hydration-render';

const HeavyHeader = () => <header>1</header>;

export const Header = () => (
  <LazyRender>
    <HeavyHeader />
  </LazyRender>
);

Customize wrapper

You can configure the wrapper component.

import React from 'react';
import { LazyRender } from 'react-lazy-hydration-render';

const HeavyHeader = () => <header>1</header>;

export const Header = () => (
  <LazyRender wrapper="p" wrapperProps={{ style: { margin: '10px' } }}>
    <HeavyHeader />
  </LazyRender>
);

Configuring IntersectionObserver

import React from 'react';
import { LazyRender, createUseObserverVisible } from 'react-lazy-hydration-render';

const useObserverVisible = createUseObserverVisible({
  rootMargin: '0px',
  threshold: 1.0,
});

const HeavyHeader = () => <header>1</header>;

export const Header = () => (
  <LazyRender useObserver={useObserverVisible}>
    <HeavyHeader />
  </LazyRender>
);

Passing custom observer

Package supports changing a loading mechanics. For example, component could be activated on click.

import React, { useEffect, useState } from 'react';
import { LazyRender } from 'react-lazy-hydration-render';

const isServer = typeof window === 'undefined';

const useClickActivated = (ref) => {
  const [isVisible, changeVisibility] = useState(isServer);

  useEffect(() => {
    if (!ref.current || isVisible) {
      return;
    }
    const handler = () => changeVisibility(true);
    ref.current.addEventListener('click', handler);
    
    return () => ref.current.removeEventListener('click', handler);
  }, [ref]);

  return isVisible;
};

const HeavyHeader = () => <header>1</header>;

export const Header = () => (
  <LazyRender useObserver={useClickActivated}>
    <HeavyHeader />
  </LazyRender>
);

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Tinkoff / react-lazy-hydration-render

Programming Languages