i18next 語言功能很慢

Question

我在 Gatsby 和 React 應用程序中使用 i18next 來處理國際化。 該網站有法語和英語版本，運行良好。 唯一的問題是，當我將語言設置為法語並刷新時，我注意到尚未加載語言的短暫延遲，因此它為我提供了英語版本（這是我為后備設置的語言），並迅速返回到法語。

我的 i18next 配置文件：

import i18n from "i18next";
import fr from "./i18n/fr.json";
import en from "./i18n/en.json";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";

const resources = {
  fr: {
    translation: fr
  },
  en: {
    translation: en
  }
};

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: "en",
    returnObjects: true,
    interpolation: {
      escapeValue: false
    }
  });
export default i18n;

你知道如何消除這種延遲並將頁面直接加載到所選語言嗎？

Answer 1

我有這個問題。 首先，我像這樣改變了fallbackLng

import Cookies from 'js-cookie';

const cookieLanguage = Cookies.get('i18next');

fallbackLng: cookieLanguage ? cookieLanguage : 'en'

然后我寫在我的 onClick function

const [langChanged, setLangChanged] = useState(null);
const language = Cookies.get('i18next');

const changeLanguageHandler = (e) => {
    const newLang = e.target.innerText.toLowerCase();   
    
    if (language !== newLang) {
        window.location.reload(true);
        broadcastChannel.postMessage("language changed");
        setLangChanged(newLang);
    }
}

我在 useEffect 中使用了 langChanged state 之類的依賴

useEffect(() => {
    if (langChanged) {
        i18next.changeLanguage(langChanged)
    }
}, [langChanged])

所以它對每種語言返回相同的延遲

Answer 2

我想后備語言是服務器端呈現的，而其他語言不是。

如果您在瀏覽器中點擊“查看頁面源代碼”，您可以看到原始的 HTML 代碼。 我想您會看到英文文本，即使頁面上顯示的是法語。

（請注意，“inspect”將顯示法語，因為這包括對 DOM 的所有動態更改，而“view page source”將顯示原始服務器響應。）

因此，您還需要在服務器上呈現非默認語言：

• 如果您將語言存儲在 cookie 中，那么您可以在服務器端查詢 cookie，並相應地發送正確的文本。
• 或者，您可以使用 URL 通知服務器所需的語言（例如 `/fr/mypage）。

我不使用 i18next，但您可能需要在服務器端將“初始存儲”設置為所需的語言，而不是將后備語言設置為“初始存儲”並在之后設置所需的語言。

我讀到您可以為I18nextProvider設置initialI18nStore和initialLanguage

另見react.i18next 服務器端渲染