Q: How is it possible to render a template on server side and hydrate on client side?

[jimbojetlag]

I wa not able to find the answer in the documentations. If Melody support template sharing with server, how is it possible to render html on server and bind events on client?

[pago]

You can render the template on the server side using Twig (https://twig.symfony.com/).
Once the client is loaded you render the same template to the same element using Melody.

[jimbojetlag]

I there an example of how the server side rendered html gets replaced with the client side rendered html?

Does this method fall into 'SSR with rehydration' in this chart (source):

If so, are you happy with the downside such as slow time to first byte in production?

[jamesb3ll]

For both SEO and performance when delivering dynamic content, SSR with Hydration is the most common method used. You can also try "Client Side Rendering with Prerendering" by delivering static HTML that is generated at build time, possibly using: prerender-loader or something similar.

[pago]

I there an example of how the server side rendered html gets replaced with the client side rendered html?

Ideally the server side rendered HTML will not be replaced but rather augmented, i.e. Melody will attach event handlers as needed but will keep the existing HTML in place. Melody will only replace existing HTML if it needs to.

Generally speaking Melody (in combination with Twig) allows you to choose any of these approaches. We are balancing all of them within the same application. Some features are rendered purely on the Server side, others only on the client side and yet others will be rendered on the server and then enhanced on the client.

I think @taueres once prepared a demo project which shows how to reuse server side rendered HTML but I'm not sure if he still has it around.

[jimbojetlag]

Ideally the server side rendered HTML will not be replaced but rather augmented, i.e. Melody will attach event handlers as needed but will keep the existing HTML in place. Melody will only replace existing HTML if it needs to.

Where is this documented? I was not able to locate this topic in the documentation.

Again, is there an available open source example for this?

[pago]

Our documentation is generally a bit weak (we're working on improvements).

As far as I know we don't have an open-source demo which includes server side rendering. Please let me know if you build one. Would be happy to link to it. :)