search

woutdp / live_svelte

Svelte inside Phoenix LiveView with seamless end-to-end reactivity
https://hexdocs.pm/live_svelte
MIT License
933 stars 36 forks source link

Client side flash when navigating #125

Closed louis-smit closed 1 week ago

louis-smit commented 1 month ago

TLDR; SSR not working after navigation when JS is enabled.

First of all, absolutely love live_svelte and already using it for some small client-side-only things at work.

However I recently started using it with SSR. It definitely does render on the server (confirmed by disabling JS and refreshing page), but when you navigate between two pages with SSR'd components (with and without LiveView) the Svelte components "flash" as if they are client side rendered. When I disable JS on the browser and navigate they do not flash and render on the server only - like sveltekit, remix etc.

Any idea what might be causing this? Any idea how I can "force" a SSR on page navigation? I can easily provide a reproducible example if necessary, but it seems to also happen on the included example_project in the repository so perhaps this is a known issue.

I have managed to work around this with HTMX boosting and moving the JS include script into the body tag in the root layout, but that only works on dead views.

Thanks again for all your hard work :)

woutdp commented 1 month ago

I'm pretty sure this commit is the culprit. https://github.com/woutdp/live_svelte/commit/e46e85dcd9c0c49c5b3263cbe2a917cd4bc37fc0

There was a memory leak issue which should be resolved by that commit, but that started causing the issue with the flash that you're mentioning. Obviously a memory leak is more important to fix so not reverting it for this, but maybe there's something we can do that solves both problems.

louis-smit commented 1 month ago

Thank you for the clear explanation @woutdp. Preventing a memory leak is of course higher priority. I'm pretty new to Svelte (only started learning it because of live_svelte, now I'm hooked) so I'm not super familiar with the internals yet but I will try to read up a bit about it.

louis-smit commented 1 month ago

Hi again @woutdp. I'm taking some time to investigate this and its true that undoing that commit fixes the flashing issue. But I'd like to know how I can actually test the memory leak?

woutdp commented 1 month ago

That's a tricky one. It can occur if you reload the page multiple times and you see the memory usage go up in your app, but there's no good deterministic way of testing it that I know of. The memory leak might even still be there but unsure

louis-smit commented 1 month ago

I'm at a loss on this one. It seems the memory does build up when you don't include the destroy method, even though its relatively slowly. But having components flash between pages is an extremely janky experience (not LiveSvelte's fault of course).

I think someone with a better understanding of both LiveView hooks and Svelte internals could probably contribute more, but I'm still more than happy to help where I can.

louis-smit commented 1 week ago

Hi @woutdp! Would really appreciate if you had a look at PR #134 whenever you have a quick second.

Thank you in advance :)

woutdp commented 1 week ago

Fixed by #134, thank you @louis-smit!

woutdp commented 1 week ago

Available in 0.13.2