SSR Hydration ideas

[daKmoR]

First Level hydration

• Define a list of components that are used in this page.
• In lit ssr we can then register these components if server or hydrate:*
• add a "loader" that will hydrate based on condition
• not yet sure how to get the initial hydration data 🤔

=> that should be possible to implement right now

it seems the 3 fundamental "states" are exclusive:

• server (only render it server-side => do not ship any js [hopefully the default])
• client (do not touch server-side and ship js)
• hydrate (render server-side and at some point do loading + rendering on client-side)

For server/client there are no additional "options"... but for hydrate, there are multiple modifies you could combine

Mode	Option	Description
server		render server-side and do not hydrate (default)
client		do not touch server-side and render client side
hydrate	👇	render server-side and at some point do loading + rendering on client-side
	.onClientLoad	hydrate as soon as possible
	.onIdle	hydrate as soon there is a free slot in the main thread
	.onDelay	hydrate after x ms
	.onMedia	hydrate as soon as a media query is met
	.onVisible	hydrate as soon as component + optional padding becomes visible
	.onClick	hydrate as you click on the element
	.onHover	hydrate as you hover over the element + optional padding (click will trigger hover as well => touchscreens)

Example	Description
render-mode="server"	non interactive stuff like layouts or graphical components (= default)
render-mode="hydrate"	most components should just hydrate as soon there is a free slot in the main thread
render-mode="hydrate:onIdle"	same as 👆
render-mode="hydrate:onClientLoad"	above the fold element that should become interactive as soon as possible
render-mode="hydrate:onMedia(@media (max-width: 320px))"	mobile burger menu that triggers a drawer for navigation (only hydrate on screens smaller then 320p)
render-mode="hydrate:onMedia(@media (min-width: 640px)).onClick"	chart that only becomes interactive on desktop after a click
render-mode="hydrate:onMedia(@media (prefers-reduced-motion: no-preference)).onClick"	a visual animation that plays on click only if there is no prefers-reduced-motion
render-mode="hydrate:onVisible.onIdle"	heavy chart that becomes interactive when element becomes visible
render-mode="hydrate:onVisible(100px)"	heavy chart that becomes interactive when element + 100px padding becomes visible
render-mode="client"	components that do something that can not be server rendered (for example need to access cookies or localStorage)

sadly this does not prevent "useless" combinations like render-mode="hydrate:onVisible.onClick.onHover".

Inspired by withastro/roadmap#108 and slinkity/slinkity#20

Example of user code

export const components = {
  'my-el': () => import('my-el/define'),
}

export default () => html`
  <h1>Rocket Blog</h1>
  <inline-notification>Do this</inline-notification>
  <!-- 👆 will be only server rendered -->
  
  <my-hero render-mode="hydrate:onClientLoad">
    Welcome ...
  </my-hero>
  <!-- 👆 server render + hydrate as soon as possible -->
  
  <my-list render-mode="hydrate"></my-list>
  <my-list render-mode="hydrate"></my-list>
  <my-list render-mode="hydrate"></my-list>
  <!-- 👆 server render + hydrate if main thread is idle  -->

  <my-chart 
    render-mode="hydrate:onVisible"
  ></my-chart>
  <!-- 👆 server render + hydrate as element becomes visble  -->
  
  <my-login 
    render-mode="client"
  ></m-login>
  <!-- 👆 only client render -->
`;

Loading strategy of polyfills

https://github.com/lit/lit/tree/main/packages/labs/eleventy-plugin-lit#bootup

Hydration of nested components

• Requires scoped registry of components?
• Has a dedicated settings.js/server.js/scoped-elements.js/... file for each component?

=> would need to become a convention & probably requires changes in lit-ssr
=> maybe custom lit-ssr renderer?

// server.js
import { FooOne } from 'foo-one';
export const settings = {
  'foo-one': FooOne,
  'my-el': () => import('foo-two'),
}

// MyEl.js
import { settings } from './server.js';

class MyEl extends ScopedElements(LitElement) {
  scopedElements() {
    return settings;
  }

  render() {
    return html`
      <foo-one></foo-one>
      <foo-two loading="hydrate:onVisible"></foo-two>
    `;
  }
}

Hydration of individual template parts

• very much just an idea - not sure if feasible
• probably pretty annoying to write in js
• could be made nicer in markdown or html? 🤔

export const fooTmp = html`<p></p>`;

export const part1 = ({ fooTmp }) => hydrate(html`
  <p @click=${() => { console.log('foo')}}>
    Discover articles from the core team and contributors about Rocket, tips and tricks included!
    ${fooTmp}
  </p>
`)

export default () => html`
  <h1>Rocket Blog</h1>
  ${part1}
`;

[daKmoR]

@aomarks if you have any more points/ideas please let me know 🤗