User experience with web components

[BB-19]

Hi Scale Team,

first of all thanks for the great components, I really like the style!

I was wondering about your reasoning for not providing native components for ReactJS and other frameworks and instead decided to build Scale as web components.
While I understand that using StencilJS is likely the easiest solution for supporting all frameworks, I see huge issues with the user-experience and performance and general compatibility issues for developers.

There is no easy or good way to pre-render these components using SSR or SSG to make the first page load fast and avoid layout shifts. It just looks bad from the user experience part.
While I am aware that StencilJS offers some pre-rendering options, it seems impossible to properly achieve this with modern frameworks like NextJS. Last time I checked the GatsbyJS example which uses renderToString for SSG, it also caused the page to shortly flash after loading when the browser took over. I admit I didn't check the examples for VueJS and other frameworks, however I would assume they are not much better.

Since ReactJS is moving more and more towards Server-Components, it gets increasingly hard to meaningfully use these web components on the server side.
In the case of NextJS (using the new App folder), I need to hide the entire page and wait for the web components to be ready before showing the page, since it otherwise ends up flashing partly pre-rendered unstyled button texts and links from the Header and Footer. While I had some success while experimenting with a custom server and using the StencilJS renderToString function, it all seems like an extra step for SSR and works far from ideal.

Scale is still a great solution for smaller projects, SPAs, and especially internal projects, however I feel like it would not be adopted this way for all cases, especially for customer facing websites like telekom.de or telekom.com that set a lot of focus on performance and user experience.

Am I maybe just missing something ? Or are my expectations just too high due to being used to highly optimized native components libraries ?

[acstll]

Hey @BB-19

first of all, thanks for sharing your question so insightfully.

Scale is still a great solution for smaller projects, SPAs, and especially internal projects, however I feel like it would not be adopted this way for all cases, especially for customer facing websites like telekom.de or telekom.com that set a lot of focus on performance and user experience.

this is exactly how we currently picture it ourselves as well. You're not missing anything.

Pre-rendering web components involving the shadow DOM is an unsolved problem, and I personally don't think declarative shadow DOM will fix it anytime soon.

It might be that in a near future web components won't be used anymore and RSC (React Server Components) are well established and used everywhere, but it also might be the complete opposite.

Back then, Stencil allowed us to develop a component library at a certain speed that was necessary. Speed was one reason. Maintainability (including AA accessibility) was the other. Plus, SSR was not what it is today in the JS-centric frontend world. All frameworks (except for React) had great support for web components, and again all (except for React) have continued to improve this support over time.

I'm glad React —and the entire frontend ecosystem— is shifting towards SSR by default. (Ironically, a React-only component library wouldn't help the vast majority of fullstack frameworks that already do SSR by default since more than a decade ago.)

Still, I believe your expectations are correct and a highly optimised React component library should be indeed provided, considering React being a part of the stack powering customer-facing sites like telekom.de.