@drips/Lazy

A React implementation of lazy hydration, which allows to lazily load parts of the application, while showing the SSR results.

How to add this to an existing application:

Step 1: Import lazy react components from the @drips/lazy package.

import { Lazy } from '@drips/lazy/react';

Step 2: Import the hydration trigger you want to use, hydration triggers are what triggers the loading of the lazy content. if no trigger is provided, the content will never be loaded.

import { domEvent, domIntersection, paramsChange, delayed, immediate } from '@drips/lazy/triggers';

Step 3: Wrap any pieces of your application you want to lazy hydrate with the lazy component.

function MyComponent() {
  return (
    <Lazy triggers={[domIntersection()]}>
      <HeavyComponent className={classes.links} data={data} />
    </Lazy>
  );
}

Step 4: In your build configuration, you will need add the @drips/lazy/babel plugin.

{
  plugins: [
    '@drips/lazy/babel',
  ],
}

how does it work:

@drips/lazy works by creating different code for your application to run in the client then on the server.

Server:

In the server the code runs normally, and the Lazy component simply render it's children and mark it's dom with a unique ID.

Code transformation:

The babel transformer splits the code, creating a new dynamically loaded module and removing the children of the lazy tag from the code.

So the example before will now look like this:

function drip_lazy_chunk_1() { return import('./app.resume-chunk-1.js'); }

function MyComponent() {
  return (
    <Lazy
      triggers={[domIntersection()]}
      // added props from the babel transformer
      params={[classes, data]}
      load={drip_lazy_chunk_1}
    >{/*removed children from the lazy tag*/}</Lazy>
  );
}

Generated chunk file ( app.resume-chunk-1.js ):

export default function (classes, data) {
  return <HeavyComponent className={classes.links} data={data} />;
}

In the client:

The Lazy component uses the id generated in the SSR/SSG to find it's dom children. it then serializes them into JSX and returning that to react as the initial render result.

it then waits to be triggered by its hydration triggers, once triggered it loads the dynamic chunk and calls the loaded function with the params it got.

From that point on the the Lazy component will render it's children regularly.

Advantages:

Using this library will allow you to partially and lazily load parts of your application. giving you a faster "Time to interactive". less time a site visitor needs to wait until the site is loaded and interactive.

Devtools:

Simple UI overlay for reporting the status of the Lazy component.

import { devtools } from '@drips/lazy/devtools';
...
<Lazy triggers={[devtools()]}>

Drawbacks:

When exploring how to implement lazy hydration in React we are limited by Reacts one step hydration. we are forced to provide it the entire HTML of our app. or it will delete it. ( even though this HTML is currently displayed in the browser ).

this library essentially polyfills React with a way to do Lazy hydration, the way we go around this limitation is scanning the html through the browser dom APIs, and converting the HTML into JSX to be returned to React.

Scanning the dom, turning it into JSX and Reacts reconciling of it are expensive and probably wrong in many cases.

On top of that when the Lazy tag hydrates its content. React will see the Lazy component now returns a new component "HeavyComponent" and will therefore recreate the HTML as new nodes, which will reset the native state of any HTML tag there ( for instance reset the play position of any video tag ).

What we would like to see from React:

We would like React to support Lazy hydration out of the box, one option we could see work is adding a new property to native JSX nodes, that will tell React to defer the hydration of the children of this element and keep showing the SSR results until this property is set to false.

<div deferHydration />

React will then defer the hydration of the children of this element. allowing Lazy hydration frameworks to load the children components of the element at a later stage.