DEV Community

Discussion on: Can web components UI use dynamic data from our backends DB as input?

Collapse
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

Anything you can do with a framework you can do with web components, and in my opinion you can do it much better as well.

I've built each of your examples at my various day jobs using web components

None of the problems you're describing are actually related to "web components vs frameworks" because all the frameworks have to solve them in some way. Some people like frameworks because they "hide" the solutions to those problems, but I don't, I'd rather learn the standard ways to solve these problems first, then only if I determine I need to add library code, pick and choose carefully.

Collapse
 
yamita profile image
Yamita • Edited

I agree with you Benny. Having your own component library and code that won't break will save time long term that would have been spent rewriting your codebase.

If web components can do the stuf above I'm learning them.

May I ask one last thing about web components vs libs. This is actually in relation to web architecture like CSR/SSR/SSG. On a high level I understand what they are but since I'm a beginner I don't know if the front-end or back-end is what configures if our webpage will use CSR/SSR/SSG. It sounds from video examples like the front-end lib determines this CSR for React and SSR/SSG for Next but when doing searches only it says that Django uses SSR and can be configured for SSG with an addon called django-distill.

So my question is, if we use web components. How would we SSR/SSG our web application? Do we make the actual component SSR/SSG? Or is it handled by our backend? Or do we use our web components IN some front-end lib that enables and take cares of the SSR/SSG with different routing methods? Like what stack do you use Benny when you want to do SSR/SSG? Still just custom web components?

In theory, If our backend can handle the SSR/SSG, it makes me wonder why anyone would even use next instead of web components + 1 backend framework. Since it seems to fit all needs.

Thank you very much. I'll go and read the Lit and see if I can solve the problem in my original post using web component code.

Collapse
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

Web components are just HTML, so they don't need SSR.

But if you really want, you can try @lit-labs/ssr

Thread Thread
 
yamita profile image
Yamita

VERY INTERESTIN!! I will like the Lit project is basically building the hype train now and it will start to take off maybe by the end of the year. Definitely want to be one of the early adapters.

I personally don't care if something is CSR/SSR from a functionality point of view and think that if a web page is fast enough for CSR it saves you money on lower server load. But I just heard that SSR/SSG is better for SEO so that's why I assumed it was a big deal for commercial reasons.

Then again these lighthouse tests at the bottom graphs show how the cleaner code from web components DOMINATE SEO scores compared to frontend libs: wix.engineering/post/is-stencil-a-...

~90 of 100 SEO for web components vs ~70 of 100 for JS libs.

They didn't have Lit in the comparison but I'm confident it would have scored similarly to stencil if not better. Not sure if these SEO scores are on a per component bases though instead of SEO of the website as a whole. But I remember reading that Google has started ranking speed as important and web components are definitely A LOT faster. Now you have more ammo in your future blogs! Looking forward to them.

Thread Thread
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦