State of SSR?

[AxelBriche]

Hello, is the "SSR" compatibility planned for 1.0 or even later?

There are now many fullstack frameworks like Next, Nuxt, Sveltekit, is a compatibility planned?

Currently using Material Web in one of these frameworks creates a delay of one second during which the components are not visible.

[asyncLiz]

Not officially planned* for 1.0, but lit-ssr support may come out of the box :)

[e111077]

Hello, update: he components should be SSRable via @lit-labs/ssr.

For NextJS integration see @lit-labs/nextjs:

https://www.npmjs.com/package/@lit-labs/nextjs

for React sans next see @lit-labs/ssr-react:

https://www.npmjs.com/package/@lit-labs/ssr-react

Nuxt lit implementation is in progress. I am going to close this issue because this component set complies with lit-ssr requirements. Future issues for integrations of lit-ssr should be filed on the Lit project over at https://github.com/lit/lit

[e111077]

Here is a NextJS example using button and textfield:

https://stackblitz.com/edit/stackblitz-starters-cbt8zs?description=The%20React%20framework%20for%20production&file=next.config.js,pages%2Findex.js&title=Next.js%20Starter

[benjamincox]

@e111077 Why do the labels of both of these show up as some default Serif font in Chrome? Kind of looks like Times to me. Shouldn't these appear as Roboto or something? Selecting the button and inspecting, it seems there are no values for var(--_label-text-type).

[e111077]

You need to load the actual Roboto font (or whatever font you change the label type to)

https://fonts.google.com/specimen/Roboto

[benjamincox]

@e111077 I don't seem to have edit privileges on your StackBlitz

[e111077]

Heya I've updated the link with an external link import of Roboto. Please let me know if there are other issues

[benjamincox]

@e111077 Looks perfect now - thanks much!

[benjamincox]

@e111077 Hmmm... any idea why there is a FOUC effect? Is it somehow because the components load their CSS via Javascript?

[e111077]

If you mean a fouc from the fonts it's likely because font has font-display swap. Personally I'd recommend hosting the font locally and setting swap to not block render as well as keep the FOUC time low since you don't have to open a new network connection

Edit: would also like to clarify. In SSR the styles are inlined into the template and not loaded via JS which should gzip incredibly well until declarative constructable stylesheets become a thing.

[JosefJezek]

@e111077 please resolve an issue in Astro, see https://stackblitz.com/edit/github-uiraud?file=src%2Fpages%2Findex.astro

[JosefJezek]

I created issue withastro/astro#8216

[e111077]

Heya @JosefJezek. I'm sorry but we're really crunching right now to release Material web 1.0 and I currently do not have time to implement a fix for Astro. I've tried before but I couldn't find how they were managing hydration script injection timing without spending more time on it.

I have diagnosed the issue, and I hope the astro team or an open source contributor can chime in with a fix. Otherwise, I'll have to take a look after we successfully land Material web 1.0