Backend Fallback

Browser fallback with local / bundled translations

With i18next you can configure a fallback backend to be used in the browser. It will try to load from your primary backend (in this case from your http backend) and if the primary backend is not reachable or does not serve translations, your second backend (in this case local or bundled translations) will be used. This is all possible thanks to the chained backend.

import i18next from "i18next";
import ChainedBackend from "i18next-chained-backend";
import HttpBackend from "i18next-http-backend";
import resourcesToBackend from "i18next-resources-to-backend";

const bundledResources = {
  en: {
    translation: {
      key: 'value'
    }
  }
};

i18next
  .use(ChainedBackend)
  .init({
    fallbackLng: "en",
    // ... your i18next config
    backend: {
      backends: [
        HttpBackend,
        resourcesToBackend(bundledResources)
      ],
      backendOptions: [{
        loadPath: '/locales/{{lng}}/{{ns}}.json'
      }]
    }
  });

You can also lazy load the in memory translations, i.e. when using webpack

Server side fallback with filesystem

On server side you can also use the i18next-fs-backend for example instead of the in memory fallback.