Lazy Load Props for Hydration

[gregod]

At the moment, the data required for hydration is written directly as a script tag to the (otherwise static) site. From a no-js first perspective, this prop data seems wasteful as we need to wait for lazily importing the component anyway. Was this done for performance reasons?

I'm proposing to write the prop data to a js module instead of the HTML and then import both data and the component in parallel in the hydration code triggered by the interaction observer. This should perform almost as well while minimizing the js required in the static HTML file.

Maybe an option would be to inline up until a specific size and switch to importing otherwise?

[nickreese]

@gregod Good question. The main reason for Elder.js writing it to the HTML has been some users are using Elder.js at the edge which makes deploys easier.

In next which will be v1.5 (pr here: #191) I'm experimenting with "prop" compression. Look at the props on this page: https://findenergy.com/tx/. It compresses the props about 45% on large pages before brotli and 10% after brotli. This almost seems silly when I could just be using an external module.

On data heavy pages, I 100% agree that external files are a better answer. I just haven't had time to explore it.

Open to a PR or continuing this discussion.

[nickreese]

Pseudo code I'm working towards with the help of @lukeed

<script type="module">

  function $$ejs_init(elem, component, props){
    import(component).then((comp)=>{
      new comp.default({ 
        target: elem,
        props: $ejs(props),
        hydrate: true
      });
    });
}

const IO, ITEMS={};
async function $$ejs(id, component, props={}) {
  const elem = document.getElementById(id);
  let propsToHydrate = props;
  if(typeof props === 'string' && props.startsWith('http')){
    const propsFile = await import(props);
    propsToHydrate = propsFile.default;
  }
  
  if (!IO) {
    IO = new IntersectionObserver((entries, observer) => {
      // ...
      if (entry.isIntersecting) {
        observer.unobserve(elem);
        ITEMS[id] = true;
        $$ejs_init(elem, component, props);
      }
    });
  }
  IO.observe(elem);
}

requestIdleCallback(function(){
    $$ejs('headerGppxgYmtDt','/dev/_elderjs/svelte/components/Header/Header.AOWJN766.js',JSON.parse(`{"permalink":"/dev/power-plants/","server":"u"}`));
})

</script>

[nickreese]

Implemented on v1.5 and pushed on next.

[nickreese]

Here is the implementation if curious:

let IO,
  $$COMPONENTS = {};
const $$ejs = async (arr) => {
  $ejs = function (_ejs) {
    return _ejs;
  };
  for (let i = 0; i < arr.length; i++) {
    $$COMPONENTS[arr[i][0]] = {
      elem: document.getElementById(arr[i][0]),
      component: arr[i][1],
      props: arr[i][2] || {},
    };

    if (typeof $$COMPONENTS[arr[i][0]].props === 'string') {
      const propsFile = await import($$COMPONENTS[arr[i][0]].props);
      $$COMPONENTS[arr[i][0]].props = propsFile.default;
    }

    if (!IO) {
      IO = new IntersectionObserver((entries, observer) => {
        var objK = Object.keys(entries);
        var objKl = objK.length;
        var objKi = 0;
        for (; objKi < objKl; objKi++) {
          const entry = entries[objK[objKi]];
          if (entry.isIntersecting) {
            const selected = $$COMPONENTS[entry.target.id];
            observer.unobserve(selected.elem);
            import(selected.component).then((comp) => {
              new comp.default({
                target: selected.elem,
                props: $ejs(selected.props),
                hydrate: true,
              });
            });
          }
        }
      });
    }
    IO.observe($$COMPONENTS[arr[i][0]].elem);
  }
};

requestIdleCallback(
  function () {
    $$ejs([
      [
        'zoomablemappMxdlyXvRt',
        '/dev/_elderjs/svelte/components/ZoomableMap/ZoomableMap.AOMHQNYN.js',
        '/dev/_elderjs/props/ejs-614237837.js',
      ],
      [
        'sortabletableFmqxLmRrQM',
        '/dev/_elderjs/svelte/components/SortableTable/SortableTable.YH4C4BSC.js',
        '/dev/_elderjs/props/ejs-983880793.js',
      ],
      [
        'headerNMYVZSgVzf',
        '/dev/_elderjs/svelte/components/Header/Header.AOWJN766.js',
        { permalink: '/dev/providers/', server: true },
      ],
    ]);
  },
  { timeout: 1000 },
);

[gregod]

I started some incremental work here v1.5...gregod:feature-minify-hydration-code but am unfortunately busy with some other things in the near future. I will leave some comments on your commit.

[nickreese]

Shipped with v1.5.0.