Client side re-rendering of components

[fbarbare]

We need some query parameters on the server side to do some checks, validate some params, etc... but in modern applications nowadays client-side rendering/re-rendering is common practice.

At the moment, if we want a property to dynamically change, we:

• either need to trigger the re-rendering of ALL OC in the current page
• either manipulate the data-attributes of the OC html so we can render only that component
• either use events to give new "params" to our components, but we have to implement that logic in every OC that we create, which can be a bit tedious.

It would be good if this system would be built in.

One problem with the params is that we would need to differentiate between params that would be Client side params and others that would be Server side ones.

Coming from a mainly React background, triggering re-rendering based on new props/attributes seem a pretty good way to go. We could allow setting data-attributes on the OC HTML element. The templates could set a Mutation Observer on that HTML element and then pass it down to e.g. the react template to pass the new "settings" which would automatically trigger the Client side re-rendering.

This implementation might have to be done on a template to template basis. This feature might be related to this one: issue 295

Any thoughts on this? If this is not clear, I am more than happy to create an example repo.

[matteofigus]

This is interesting. Just to understand a bit more, can you give me an example of your scenario when you need properties to dynamically change and then re-rendering of nested components? I think the original scenario in #295 was about a SSR header that would have some breadcrumbs, and the idea was to change them depending on some Client-side actions. Is it something similar?

[fbarbare]

So let's say we have a breadcrumbs open component and to render it I would give it a list of URLs and page names. My app being a client side app, I might change page without actually re-rendering the whole browser, but I need to update the breadcrumbs component with the new values. Having an "automated" way of detecting changes in those given properties without having to implement an event system could be a nice way of handling those scenarios.

It's worth noting that events can be annoying if you have 2 times the same component in the same page that should have different values. We could do something with the render IDs, but that's adding complexity to both sides, the app and the component so they listen on the right events

[fbarbare]

Any thoughts on that @matteofigus ? 🙂

[fbarbare]

@matteofigus Should I make a draft of that feature?

[matteofigus]

Sure!