[request] data attribute for conditionally opting out of SSR on specific custom elements?

[hrmcdonald]

Awesome to see someone has picked up the torch here to keep this integration alive! I've swapped to this from the deprecated official lit integration and haven't found any issues so far - so great work!

One conundrum we've found is that there are a few hyper-specific places where we needed a lit component to never be SSR'd. Before we could just mark those with client:only="lit". However in all of my research this is not an option we have with custom integration provided renderers. It will work if the lit integration is the only integration used, but since we use multiple there is no way to specify the right renderer to utilize. It seems to just be hardcoded inside of Astros rendering logic under those circumstances at the moment.

I imagine though it would be very easy to simply check if an element has an attribute like data-lit-no-ssr, data-lit-skip-ssr, or data-lit-client-only. The element would just not be rendered, but its JS would get bundled and initialized by the browser normally on the client instead of needed to be hydrated.

Does this sound feasible or reasonable?

I'd be happy to help investigate implementing this if it's not immediately obvious how this would be done as well.

[hrmcdonald]

Actually I found a comment in the Lit source code mentioning enabling a similar kind of solution like this. Perhaps I'll open a similar ticket there to see if they'd be interested in enabling this somehow (unless they already consider it possible) with the option available.

It seems like simply doing something like this might work actually:

import { ElementRenderer } from '@lit-labs/ssr';
import { LitElementRenderer } from '@lit-labs/ssr/lib/lit-element-renderer.js';

class SkipSSRRenderer extends ElementRenderer {

  // Overridden to only match elements with the designated noop/skip SSR attribute
  static matchesClass(ceClass, tagName, attributes) {
    return attributes.has('data-lit-client-only');
  }
}

/**
 * Where rendering, now use that additional renderer like so.
 * Placing the custom renderer ahead of the default SSR renderer means it would match elements with this attribute.
 * Because it extends `ElementRenderer` it then won't attempt to SSR the element. All other elements would fall through 
 * for the `LitElementRenderer` to decide to SSR or not from there.
 */
const result = render(html`...`, {
  elementRenderers: [SkipSSRRenderer, LitElementRenderer],
});

[jlukic]

Im currently using this integration with client:only components (like the semantic ui playground) using the syntax you was saying wasnt working for you.

<CodePlayground client:only="lit" >

It should be supported OOB. Maybe it's something particular to your set up.

[hrmcdonald]

Im currently using this integration with client:only components (like the semantic ui playground) using the syntax you was saying wasnt working for you.

It should be supported OOB. Maybe it's something particular to your set up.

It totally might be. Here are two potential reasons why I could see it not working for us at the moment:

1) Is the ability to do this an Astro 5 improvement?

We are still using Astro 4 at the moment. Swapping out the old lit integration for this one is part of our efforts to migrate to Astro 5 though. So if this is resolved on Astro 5, then I'll come back and close this issue for sure!

2) Do your projects only use this one Astro framework integration?

My understanding is that if your Astro project is only configured with one integration then yes client:only="lit" will work. However, that is because any variation of client:only will work in that scenario - when there is only on integration configured Astro defaults to always using it for client:only. So you can technically just put client:only, client:only="lit" or even client:only="anything-else-here" and it will just fallback to the only configured renderer.

We have to use multiple integrations though. Our site is a docs site for our Lit design system. So we render examples for Lit, Angular, and React. When multiple integrations/renderers are registered like that, my understanding is that that is when the ="..." actually matters on the client:only directive. It seems that when it does, the logic is hardcoded for only the default integrations right now. There is no way to configure a keyword for a 3rd party integration at this time.

If you add the React() astro integration to your project for example, client:only="lit" might start throwing errors if this is actually the case.