Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
jimbojetlag opened this issue Mar 1, 2019 · 6 comments
Labels

Comments

@jimbojetlag
Copy link

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
Copy link
Contributor

pago commented Mar 14, 2019

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.

@pago pago added the question label Mar 14, 2019
@jimbojetlag
Copy link
Author

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):

image

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

@jamesb3ll
Copy link

jamesb3ll commented Mar 14, 2019

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
Copy link
Contributor

pago commented Mar 18, 2019

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
Copy link
Author

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
Copy link
Contributor

pago commented Mar 25, 2019

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. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants