CSR/Hydratation

[mikadev]

Describe the bug

When using SSR + CSR i observer the hydratation always happen even if nothing change, i mean my data are refreshed, that cause a trouble when i use middle service between the server and the client (a translation service) so after the html content being translated (nothing else change) the data back to the original language.

More details can be found here => https://discord.com/channels/457912077277855764/1318978081708576798

Reproduction

Is not related to code

Logs

No response

System Info

System:
    OS: Linux 4.19 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (8) x64 Intel Core Processor (Haswell, no TSX)
    Memory: 8.61 GB / 15.30 GB
    Container: Yes
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 20.18.0 - /usr/bin/node
    npm: 10.9.2 - /usr/bin/npm

Severity

annoyance

[paoloricciuti]

If you can provide a reproduction we can take a look but what I suspect is happening is that your translation service has a different language on the server than on the client and that's why you are seeing the nodes change

[mikadev]

@paoloricciuti here the url => https://subdir-18597bb426.preview.weglot.io/ | the translated one => https://subdir-18597bb426.preview.weglot.io/es (this one is supposed to be in spanish) is it sufficient ? Yes your'e right about the server language, but i don't understand how is related to what happen then. From my point everything is the same there is some minors change <script> injection on the head nothing much more

[trueadm]

Are you hitting a hydration mismatch in dev? If you are, then hydration will fail and a full remount on the client will happen. We need a repro that isn't just a link to your website too, such as a minimal code reproduction on StackBlitz or something similar.

[paoloricciuti]

Nope, we need to see the code not the end result. What is happening is that svelte is first rendering on the server with the wrong language, then is doing it again on the client. Since svelte is a UI framework it's job is to make sure that if you change a variable it will reflect on the UI. That's why on the client is executing your component client again to keep track of all the places where it needs to update the information. In doing so it's calling your functions that now returns a different translation and it corrects the dom. The fix to this is to fix the mismatch between the server language and the client language

[mikadev]

but how i can fix the mismatch if the point here is to translate ? (In the oldest svelte it was a hydrate option i think), how i can provide the code the service is an external is not mine and my code is regular svelte page/component nothing else

[paoloricciuti]

but how i can fix the mismatch if the point here is to translate ? (In the oldest svelte it was a hydrate option i think)

You should use the accept language header to set the right translation language on the server.

[paoloricciuti]

how i can provide the code the service is an external is not mine and my code is regular svelte page/component nothing else

Wait...how are you using this service?

[mikadev]

what do you mean i need to translate on the server ? i don't do any call the service intercept handle the http call (reverse proxy) then the HTML is returned to the client

[paoloricciuti]

what do you mean i need to translate on the server ? i don't do any call the service intercept handle the http call (DNS entry) then the HTML is returned to the client

Ohhh i understand now...so your translation service is just a proxy that take the html in, translate the whole html and return it to the browser?

[mikadev]

Exactly

[paoloricciuti]

Mmm I don't think there's really a way out of this...can you link me the service you are using? Maybe they have some other way of doing things that could be used

[mikadev]

I use exactly this way (Standard sub-directory at the end this is well explained) there is 3 options => https://www.weglot.com/technical-presentation#w-tabs-0-data-w-pane-1 (i already start exchange with them but at this point there is not too much) the simplest way is just an option to disable hydratation no ?

[paoloricciuti]

Without hydration svelte can't work...you might just ad well do csr = false at that point

[mikadev]

@paoloricciuti thanks for this exchange it is more clear. I think it worth to improve the documentation and to be more clear on when svelte will redo hydrate or not. I also observe on my pseudo static page (template page without reactivity just slot) the hydrate also occur. I'm understanding that is a comprehensive limitation and it's ok but again this is an important point for developers to understand.

[mikadev]

So far so good i think the solution for me will be to csr = false in my static routes (most part of the app) and the other i'll do regular translation.

(It will nice to improve the doc before closing this issue) thanks again

[dummdidumm]

After having reread this, I don't really see how we can document this without complicating matters for the average user that will not run into such edge case scenarios. I'm therefore closing this - glad the issue's solved.