|
> First, the idea that one of web components' strengths is bypassing serverside rendering is a bit misleading. SSR has been foundational to reducing time to first meaningful paint, ensuring accessibility, and improving seo. to argue that bypassing it is an advantage seems antithetical to best practices, even when using client-side tech like web components. This comment deserves some clarity. Web components should not bypass server-side rendering. However, that server-side rendering should not come from the web components themselves. Rather, the "SSR" in this case should be the job of whatever generates the page HTML. The page HTML should include default "slotted" content (inside the custom element's tag) to be picked up by the web component when the page loads. That's the best way to do progressive enhancement in web component land. Whenever I reach a point when I think, "Gee, I wish I could SSR this web component," I take it as a bad smell, like I'm probably not taking advantage of web component features. Put another way, I wouldn't want to SSR a web component for the same reason I wouldn't want to SSR a <p> tag. The latter makes no sense, right? Web components are custom elements, and they should be treated like elements, and designed like elements. > Web components certainly have their place and, used judiciously, can certainly add value. It's just essential to approach them with a nuanced understanding and not as a silver bullet. Fully agreed with this, it should be repeated over and over. Web components can be part of a balanced diet but they can't be the whole meal. |
The author mentioned Lit not having a stable SSR story (a small, fast library to leverage web components).
My suspicion here is that some do too much within their components that they want to render on the server.
There’s two possible solutions already:
1. Don’t generate all your html inside the component (in js), but instead use the component to enclose markup that you render on the server.
2. Decouple html rendering (lit-html) from your component. If your component calls a function that spits out html, so can your server (if it runs JS).