React-i18next 僅在組件重新渲染后翻譯

Question

我有一個使用英語和法語的 Next 和 react-i18next 的頁面。
現在的問題是，如果我將語言設置為 Frn 並刷新，它仍然顯示英文內容。
我發現了兩個有線的東西：

1. 如果我刪除 SSR 內容，即 getServersideProps，就會出現法語翻譯。
2. 任何會觸發組件重新渲染的東西都會更新翻譯。 （例如：如果一個孩子被重新渲染，孩子會有frn，但所有父母仍然是英文）

代碼：
pages/.../indexs.tsx

export const getServerSideProps: GetServerSideProps = async ({ req }) => {
  // async requests
  return {
    props: { ...props },
  };
  return {
    props: {...},
  };
};

export default function Page(props) {
  const { t } = useTranslation();
  // other hooks
  return (
    <>
      <h2>{t('page title') + temp}</h2>
      // ... other components
    </>
  )
}

initi18n.ts ：

export const initI18n = async () =>
  await i18n
    .use<ThirdPartyModule>(initReactI18next)
    .init({
      resources: {
        en: {
          common: commonEn,
        },
        fr: {
          common: commonFr,
        },
      },
      ns: ['common'],
      defaultNS: 'common',
      lng: 'en',
      fallbackLng: 'en',
      interpolation: {
        escapeValue: false,
      },
      debug: true,
    });

_app.tsx （根組件）：

initI18n().then(
  () => undefined,
  () => undefined,
);

function MyApp({})

i18n 調試日志：
i18next: languageChanged en
i18next：初始化 {...}
i18next::translator: missingKey （一些英文鍵丟失，應該沒問題）
i18next: languageChanged fr

我自己的調查如下：
在一個 useEffect 中，它從本地存儲中獲取 selectedLang（或默認為英語）=> 並調用i18n.changeLanguage(currLang) 。 這就是為什么在日志中，它首先設置為 eng，然后設置為 frn。
但我無法弄清楚為什么在將 lang 設置為 frn 后它沒有呈現更改。

嘗試了一個codeandbox但失敗了。 任何幫助，將不勝感激。

Answer 1

根據我迄今為止的研究，這種行為“符合預期”。
第一個問題是為什么不使用 next-18next，原因是我們無法在 url 中添加語言環境，而且我無法在“傳統方式”中找到可靠的示例。
所以很難切換到next-i18next。 並且基於 Nextjs 的邏輯，它將顯示服務器渲染，直到觸發客戶端重新渲染。 並且使用語言檢測器會導致下一次渲染沖突。
Previously we had a useeffect function in header component, so turned out only the header got translated, except for the static page. 現在我只是將副作用移至基礎組件，即 i18n 提供者的子級。 所以對整個頁面而不是某些組件的重新渲染效果。
好吧，這不是最好的解決方案，但至少到目前為止有效。