fix: Text content did not match (Hydration Error) (#1267)

cookie.parse method seems to only accept base64 encode values
see remix-run/remix#5523 (comment)

app/entry.server.tsx

@@ -16,6 +16,7 @@ import { renderToPipeableStream } from "react-dom/server";
 import { I18nextProvider, initReactI18next } from "react-i18next";
 import i18nConfig from "~/i18n";
 import i18next from "~/i18next.server";
+import { detectLanguage } from "./root.server";
 
 declare global {
   namespace NodeJS {
@@ -189,7 +190,7 @@ export default async function handleRequest(
   loadContext: AppLoadContext
 ) {
   const i18nInstance = createInstance();
-  const lng = await i18next.getLocale(request);
+  const lng = detectLanguage(request);
   const ns = i18next.getRouteNamespaces(remixContext);
 
   await i18nInstance

app/root.tsx

@@ -43,6 +43,7 @@ import styles from "./styles/legacy-styles.css";
 import { combineHeaders } from "./utils.server";
 import { H1, H2 } from "./components/Heading/Heading";
 import { initializeSentry } from "./sentry.client";
+import { useChangeLanguage } from "remix-i18next";
 
 // import newStyles from "../common/design/styles/styles.css";
 
@@ -560,7 +561,8 @@ export default function App() {
   );
 
   const { i18n } = useTranslation();
-  // useChangeLanguage(locale);
+  useChangeLanguage(locale);
+
   const main = (
     <main className="flex-auto relative pb-8 w-full">
       {typeof alert !== "undefined" &&