Client side flash when navigating

[louis-smit]

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]

I'm pretty sure this commit is the culprit. e46e85d

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]

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]

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]

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]

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]

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

Thank you in advance :)

[woutdp]

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

[woutdp]

Available in 0.13.2

[coveres]

I'm on 0.13.2 and still see the flash when navigating?

[louis-smit]

@coveres can you provide something I can test on? I just tested 0.13.2 and no flash when navigating.

Thank you.

[coveres]

@louis-smit Here is an example repo, make sure to run npm install --prefix assets.

[louis-smit]

Hi @coveres, sorry it took so long to get back to you. I can confirm the flashing issue is back, even on my local repo. But I'm not yet sure why. Will see if I can figure it out.

[coveres]

@louis-smit @woutdp I took a look at the code and found out the priv directory is generated from a different commit. I cloned the repo and ran mix assets.build, then copied the priv directory to my example's live_svelte dependency, and it fixed the flashing. However, I'm not sure how the priv directory is generated upon installation of a Hex dependency, so I'd appreciate if you could provide some insight on that.

[coveres]

For anyone stumbling upon this, just want to say it's been fixed on 0.13.3 hex release.