Rendering seele server-side

Follow the Lit SSR documentation and @lit-labs/ssr documentation.

• Astro: the official support for Lit SSR was stopped in Astro v5, however you can use Astro-Lit.
• Eleventy: eleventy-plugin-lit.

There is also an example without using frameworks:

• Building script
• SSR entry point

How SSR is handled in seele

Here are some experiences in seele in terms of SSR.

Outputting less useless code on server

Some invisible components are not SSR'd, for example <md-ripple> and <md-focus-ring>. The extra cost is that you need to align them with

md-ripple,
md-focus-ring {
  position: absolute;
}

in some flexbox containers with gaps (or similar) to prevent layout shift; in return we save usually dozens of KBs of invisible shadow root templates in the rendered result. Though the duplicated templates outputted without bypassing such components will get gzipped eventually, I still consider this worthy.

In constructor()

Setting event listeners on a component's host should be done in constructor(), guarded with isServer from Lit; initial ElementInternals values should also be set in constructor(), but without any condition; like below:

class A extends InternalsAttached(LitElement) {
  constructor() {
    super();
    this[internals].role = 'listbox';
    if (!this.hasAttribute('tabindex')) {
      this.setAttribute('tabindex', '0');
    }
    if (!isServer) {
      this.addEventListener('keydown', this.handleKeyDown.bind(this));
      this.addEventListener('click', this.#handleClick.bind(this));
    }
  }
}