is there a way to ensure translations are serve side rendered?

[Joseph Bartels]

a) love the library's simplicity
b) ran into some hiccups:

1. All the translations flash from translation key -> translation on page load (while en.json is being fetched)
   e.g. "footer.contact" is rendered onto the screen, quickly followed by the translation (e.g. "Contact Us")

2. SSR is not rendering the translation
   e.g. in the page source code I literally see <a href="/contact">footer.contact</a>

if #2 could be fixed, then it would fix #1 for most cases.

any recommendations or thoughts on ☝️ ??

[Joseph Bartels]

I played around a little more and got the results I was looking for.
When a { translations } object is passed in, that contains translations for the default language -then it will be SSR'd

And setting a new language triggers fetching of that languages translation json.

import en from "../assets/i18n/en.json";

const translations = { en };

export default App() => {
  return (
    <TranslationProvider root="assets/i18n" lang="en" translations={translations}>
      ...
    </TranslationProvider>
  );
};

Does the trick perfectly!