First Level hydration

[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
strategy="server"	non interactive stuff like layouts or graphical components (= default)
strategy="hydrate"	most components should just hydrate as soon there is a free slot in the main thread
strategy="hydrate:onIdle"	same as 👆
strategy="hydrate:onClientLoad"	above the fold element that should become interactive as soon as possible
strategy="hydrate:onMedia('(max-width: 320px)')"	mobile burger menu that triggers a drawer for navigation (only hydrate on screens smaller then 320p)
strategy="hydrate:onMedia('(min-width: 640px)') && onClick"	chart that only becomes interactive on desktop after a click
strategy="hydrate:onMedia('(prefers-reduced-motion: no-preference)') && onClick"	a visual animation that plays on click only if there is no prefers-reduced-motion
strategy="hydrate:onVisible && onIdle"	heavy chart that becomes interactive when element becomes visible
strategy="hydrate:onVisible(100px)"	heavy chart that becomes interactive when element + 100px padding becomes visible
strategy="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 strategy="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 strategy="hydrate:onClientLoad">
    Welcome ...
  </my-hero>
  <!-- 👆 server render + hydrate as soon as possible -->
  
  <my-list strategy="hydrate"></my-list>
  <!-- 👆 server render + hydrate if main thread is idle  -->

  <my-chart strategy="hydrate:onVisible"></my-chart>
  <!-- 👆 server render + hydrate as element becomes visible  -->

  <my-heavy-chart strategy="onVisible || onMedia('(min-width: 768px)')"></my-heavy-chart>
  <!-- 👆 server render + hydrate -->
  <!-- desktop: hydrate immediately (matches media query) [could add && onIdle] -->
  <!-- mobile: hydrate as element becomes visible -->

  <my-heavy-graph strategy="hydrate:onMedia('(min-width: 768px)') && onVisible || onClick"></my-heavy-graph>
  <!-- 👆 server render + hydrate -->
  <!-- desktop: hydrate as element becomes visible -->
  <!-- mobile: hydrate on click (to safe bandwidth) -->
  
  <my-login strategy="client"></m-login>
  <!-- 👆 only client render -->
`;

Loading strategy of polyfills

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

---

Further Hydration topics #302

[daKmoR]

another contender as an alternative to render-mode is strategy.

<my-list strategy="hydrate"></my-list>

inspired by partytown script handling via a worker
https://twitter.com/adamdbradley/status/1506333446737739780?s=20&t=zqVPNJL5OUiOEXifKvVFUA

[daKmoR]

This has been implemented via a loading attribute.

<my-chart strategy="hydrate:onVisible"></my-chart>

see the docs https://next.rocket.modern-web.dev/docs/basics/hydration/