Web Component - Progressive Enhancement

[jake-danton]

We recently switched to Preact from Lit and were looking for the same progressive enhancement behavior as @lit-labs/ssr provides. So we created preact-progressive-enhancement.

With this, we can define a web component that works as expected when run fully on client side but that also prerenders server side while retaining the custom html tags for targeted hydration.

So, given a Preact component:

const MyComponent = (props) => {
...
}

You define a progressively enhanced web component:

import { define } from "preact-progressive-enhancement";

export const MyComponentElement= define(MyComponent, 'my-component', ['attribute1', 'attribute2'], { shadow: true, mode: 'open' })

Which you can use during SSR:

import { html } from "htm/preact";
import { prerender } from "preact-iso";

const ssrResult = prerender(html`<${MyComponentElement} attribute1="value1"><//>`)

And get prerendered html:

<my-component attribute1="value1">
    <template shadowrootmode="open">
        ...
    </template>
</my-component>

Which you can optionally hydrate by importing the file with the define call client side.

Combining this with the is-land component has resulted in an easy DIY island architecture in just a few lines of code and completely compatible with any frameworks.