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
or
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 ;
}
ref . current . addEventListener ( ' click ' , ( ) => changeVisibility ( true ) ) ;
} , [ ref ] ) ;
return isVisible ;
} ;
const HeavyHeader = ( ) => < header > 1 < / header > ;
export const Header = ( ) => (
< LazyRender useObserver = { useClickActivated } >
< HeavyHeader / >
< / LazyRender >
) ;