Make browser language detection work with SSR

Author: garronej

src/lib/i18n.tsx

@@ -1,20 +1,20 @@
 import React, { createContext, useContext, useMemo } from "react";
 import type { ReactNode } from "react";
-import { isBrowser } from "./tools/isBrowser";
+import { createStatefulObservable, useRerenderOnChange } from "./tools/StatefulObservable";
 
-let langIfNoProvider: undefined | string;
+const langContext = createContext<string | undefined>(undefined);
 
-export function setLangToUseIfProviderNotUsed(lang: string) {
-    langIfNoProvider = lang;
-}
+const $browserLanguageDifferentFromFrAfterFirstEffect = createStatefulObservable<
+    string | undefined
+>(() => undefined);
 
-const langContext = createContext<string | undefined>(undefined);
+export function useLang(): string {
+    useRerenderOnChange($browserLanguageDifferentFromFrAfterFirstEffect);
 
-export function useLang(): string | undefined {
-    const lang = useContext(langContext);
+    let lang = useContext(langContext);
 
     if (lang === undefined) {
-        return langIfNoProvider ?? (!isBrowser ? undefined : navigator.language);
+        lang = $browserLanguageDifferentFromFrAfterFirstEffect.current ?? "fr";
     }
 
     return lang;
@@ -106,10 +106,6 @@ export function createComponentI18nApi<
         const lang = useLang();
 
         const bestMatchLang = useMemo(() => {
-            if (lang === undefined) {
-                return "fr";
-            }
-
             const bestApproxLang = getLanguageBestApprox({
                 "languages": Object.keys(messagesByLang),
                 "languageLike": lang
@@ -142,3 +138,17 @@ export function createComponentI18nApi<
         [`add${componentName}Translations`]: addTranslations
     } as any;
 }
+
+export function startI18nLogic(params: { registerEffectAction: (action: () => void) => void }) {
+    const { registerEffectAction } = params;
+
+    registerEffectAction(() => {
+        const lang = navigator.language;
+
+        if (lang === "fr") {
+            return;
+        }
+
+        $browserLanguageDifferentFromFrAfterFirstEffect.current = lang;
+    });
+}

src/lib/start.ts

@@ -1,14 +1,12 @@
 import { isBrowser } from "./tools/isBrowser";
 import { assert } from "tsafe/assert";
 import { symToStr } from "tsafe/symToStr";
-import { setLangToUseIfProviderNotUsed } from "./i18n";
+import { startI18nLogic } from "./i18n";
 import type { ColorScheme } from "./darkMode";
 import { startClientSideIsDarkLogic } from "./darkMode";
 
 export type Params = {
     defaultColorScheme: ColorScheme | "system";
-    /** If not specified it will fall back to browser preference */
-    langIfNoProvider?: string;
     /** Default: false */
     verbose?: boolean;
 };
@@ -21,7 +19,7 @@ export type NextParams = {
 let isStarted = false;
 
 async function startReactDsfrWithOptionalNextParams(params: Params, nextParams?: NextParams) {
-    const { defaultColorScheme, verbose = false, langIfNoProvider } = params;
+    const { defaultColorScheme, verbose = false } = params;
 
     assert(
         isBrowser,
@@ -37,30 +35,25 @@ async function startReactDsfrWithOptionalNextParams(params: Params, nextParams?:
 
     isStarted = true;
 
-    if (langIfNoProvider !== undefined) {
-        setLangToUseIfProviderNotUsed(langIfNoProvider);
-    }
+    const registerEffectAction: (action: () => void) => void =
+        nextParams === undefined ? action => action() : nextParams.registerEffectAction;
 
     startClientSideIsDarkLogic({
         "colorSchemeExplicitlyProvidedAsParameter": defaultColorScheme,
         "doPersistDarkModePreferenceWithCookie":
             nextParams === undefined ? false : nextParams.doPersistDarkModePreferenceWithCookie,
-        "registerEffectAction":
-            nextParams === undefined ? action => action() : nextParams.registerEffectAction
+        registerEffectAction
     });
 
+    startI18nLogic({ registerEffectAction });
+
     (window as any).dsfr = { verbose, "mode": "manual" };
 
     await import("../dsfr/dsfr.module" as any);
 
     const { dsfr } = window as unknown as { dsfr: { start: () => void } };
 
-    if (nextParams === undefined) {
-        dsfr.start();
-        return;
-    } else {
-        nextParams.registerEffectAction(() => dsfr.start());
-    }
+    registerEffectAction(() => dsfr.start());
 }
 
 export function startReactDsfr(params: Params) {

src/next.tsx

@@ -31,7 +31,6 @@ import faviconWebmanifestUrl from "./dsfr/favicon/manifest.webmanifest";
 import type { ColorScheme } from "./lib/darkMode";
 import DefaultDocument from "next/document";
 import { getAssetUrl } from "./lib/tools/getAssetUrl";
-import { setLangToUseIfProviderNotUsed } from "./lib/i18n";
 import { getColors } from "./lib/colors";
 import "./dsfr/dsfr.css";
 import "./dsfr/utility/icons/icons.css";
@@ -115,23 +114,17 @@ export function createNextDsfrIntegrationApi(params: Params): NextDsfrIntegratio
     let isAfterFirstEffect = false;
     const actions: (() => void)[] = [];
 
-    {
-        startDsfrReactParams.langIfNoProvider ??= "fr";
-
-        if (isBrowser) {
-            startReactDsfrNext(startDsfrReactParams, {
-                doPersistDarkModePreferenceWithCookie,
-                "registerEffectAction": action => {
-                    if (isAfterFirstEffect) {
-                        action();
-                    } else {
-                        actions.push(action);
-                    }
+    if (isBrowser) {
+        startReactDsfrNext(startDsfrReactParams, {
+            doPersistDarkModePreferenceWithCookie,
+            "registerEffectAction": action => {
+                if (isAfterFirstEffect) {
+                    action();
+                } else {
+                    actions.push(action);
                 }
-            });
-        } else {
-            setLangToUseIfProviderNotUsed(startDsfrReactParams.langIfNoProvider);
-        }
+            }
+        });
     }
 
     const isDarkPropKey = "dsfrIsDark";
@@ -148,6 +141,9 @@ export function createNextDsfrIntegrationApi(params: Params): NextDsfrIntegratio
             }
 
             useEffect(() => {
+                if (isAfterFirstEffect) {
+                    return;
+                }
                 isAfterFirstEffect = true;
                 actions.forEach(action => action());
             }, []);