search

sergiodxa / remix-i18next

The easiest way to translate your Remix apps
https://sergiodxa.github.io/remix-i18next/
MIT License
618 stars 44 forks source link

Translations not loading on first request on the server #148

Closed recipher closed 1 year ago

recipher commented 1 year ago

Describe the bug

Hi. I'm using Grunge Stack, running Architect (locally).

Took me a while to remember that client files are server from the _static folder in Architect, so once I did that, I got it working.

But... on first request, it doesn't appear to be loading translations on the server - so when it renders the html the first time, nothing is translated, I just see key names, then once it hydrates in the browser, the translations work. So, I get a kind of "flash of unstyled content" (but for translations).

I also get a bunch of related errors in the browser console.

"Hydration failed because the initial UI does not match what was rendered on the server"

I've investigated a bit but can't work out what is or is not happening on the server. Any ideas?

Your Example Website or App

https://github.com/recipher/administrato

Steps to Reproduce the Bug or Issue

...

Expected behavior

As a user, I expect to see translated content on first request.

Screenshots or Videos

Screenshot 2023-09-13 at 11 37 54

Platform

Additional context

No response

recipher commented 1 year ago

It seems that Architect runs from the /server directory, so it can't see files at ./public. Changing to ../public has made it work locally. I haven't deployed yet, so I'm not sure what will happen on the server - I guess I'll have to move the files somewhere.

Next issue I have is that the server translations always use the fallbackLng, not sure why yet.

AyadiTaharSmunch commented 1 year ago

Did you find any solution ?