如何配置i18next仅从远程加载一次翻译文件？

你可以通过以下两种核心方式实现只发起一次翻译文件请求：

1. 自定义后端加载逻辑 #

因为你的每个语言文件已经包含所有命名空间，直接修改i18next-http-backend的配置，忽略命名空间参数，只按语言请求单个文件。

方式一：修改loadPath #

直接指定不带命名空间的请求路径，让后端返回对应语言的完整翻译数据：

import i18n from 'i18next';
import Backend from 'i18next-http-backend';
import { initReactI18next } from 'react-i18next';

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    backend: {
      // 只按语言拼接请求地址，去掉命名空间变量
      loadPath: 'https://your-remote-server/{{lng}}.json'
    },
    // 正常声明所有需要的命名空间
    ns: ['common', 'profile', 'dashboard'],
    defaultNS: 'common',
    lng: 'zh-CN',
    fallbackLng: 'en',
    // 其他配置...
  });

方式二：自定义load函数 #

如果需要更灵活的请求逻辑（比如处理错误、自定义 headers），可以重写后端的load方法，完全忽略命名空间参数：

i18n.init({
  backend: {
    load: function(languages, namespaces, callback) {
      // 仅取当前激活的第一个语言，忽略命名数组
      const targetLng = languages[0];
      
      fetch(`https://your-remote-server/${targetLng}.json`, {
        // 可添加自定义请求头、认证信息等
        headers: { 'Accept': 'application/json' }
      })
      .then(res => {
        if (!res.ok) throw new Error(`Failed to load ${targetLng} translations`);
        return res.json();
      })
      .then(translations => {
        // 将返回的全量翻译数据映射到对应语言的所有命名空间
        const resources = { [targetLng]: translations };
        callback(null, resources);
      })
      .catch(err => callback(err, null));
    }
  },
  // 其他配置不变
});

2. Next.js 预加载翻译文件（推荐） #

利用Next.js的服务端渲染能力，在页面初始化前提前加载对应语言的翻译文件，直接注入到i18next资源中，彻底避免客户端重复请求：

在页面/组件的服务端方法中加载 #

// 比如在pages/_app.js的getServerSideProps中
export async function getServerSideProps({ locale }) {
  // 请求远程服务器的对应语言翻译文件
  const res = await fetch(`https://your-remote-server/${locale}.json`);
  const translations = await res.json();

  return {
    props: {
      initialTranslations: translations,
      initialLocale: locale
    }
  };
}

// 在_app组件中注入资源
function MyApp({ Component, pageProps }) {
  const { initialTranslations, initialLocale } = pageProps;

  useEffect(() => {
    // 将全量翻译数据添加到i18next，*表示所有命名空间共享该数据
    i18n.addResourceBundle(initialLocale, '*', initialTranslations, true, true);
  }, [initialTranslations, initialLocale]);

  return <Component {...pageProps} />;
}

export default MyApp;

通过以上配置，i18next会直接从已加载的全量数据中读取各个命名空间的翻译，不会再针对每个命名空间发起单独请求。

内容的提问来源于stack exchange，提问作者Florin Baciu