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 服务器端渲染