Alternative Caching with i18next

Search…
Browser caching with local storage
With i18next you can configure a cache layer to be used in the browser. It will load and cache resources from localStorage and can be used in combination with the chained backend.
import i18next from "i18next";
import ChainedBackend from "i18next-chained-backend";
import LocizeBackend from "i18next-locize-backend";
import LocalStorageBackend from "i18next-localstorage-backend";
​
i18next
  .use(ChainedBackend)
  .init({
    fallbackLng: "en",
    // ... your i18next config
    backend: {
      backends: [
        LocalStorageBackend,
        LocizeBackend
      ],
      backendOptions: [{
        expirationTime: 7 * 24 * 60 * 60 * 1000 // 7 days
      }, {
        projectId: "[PROJECTID]",
        apiKey: "[APIKEY]",
        version: "[VERSION]",
        referenceLng: "en"
      }]
    }
  });
More information can be found here:
i18next-chained-backend
i18next-localstorage-backend
i18next-locize-backend​
Server side caching with filesystem
With i18next you can configure a cache layer to be used on server side. It will load and cache resources from the filesystem and can be used in combination with the chained backend.
import i18next from "i18next";
import ChainedBackend from "i18next-chained-backend";
import LocizeBackend from "i18next-locize-backend";
import FsBackend from "i18next-fs-backend";
​
i18next
  .use(ChainedBackend)
  .init({
    fallbackLng: "en",
    // ... your i18next config
    backend: {
      backends: [
        FsBackend,
        LocizeBackend
      ],
      backendOptions: [{
        expirationTime: 7 * 24 * 60 * 60 * 1000, // 7 days
        loadPath: './locales_cache/{{lng}}/{{ns}}.json',
        addPath: './locales_cache/{{lng}}/{{ns}}.json' // make sure the folders "locales_cache/{{lng}}" exists
      }, {
        projectId: "[PROJECTID]",
        apiKey: "[APIKEY]",
        version: "[VERSION]",
        referenceLng: "en"
      }]
    }
  });
More information can be found here:
i18next-chained-backend
i18next-fs-backend
i18next-locize-backend​
React-native caching with AsyncStorage
With i18next you can configure a cache layer to be used on react-native. It will load and cache resources from the AsyncStorage and can be used in combination with the chained backend.
import i18next from "i18next";
import ChainedBackend from "i18next-chained-backend";
import LocizeBackend from "i18next-locize-backend";
import AsyncStorageBackend from "i18next-async-storage-backend";
​
i18next
  .use(ChainedBackend)
  .init({
    fallbackLng: "en",
    // ... your i18next config
    backend: {
      backends: [
        AsyncStorageBackend,
        LocizeBackend
      ],
      backendOptions: [{
        expirationTime: 7 * 24 * 60 * 60 * 1000 // 7 days
      }, {
        projectId: "[PROJECTID]",
        apiKey: "[APIKEY]",
        version: "[VERSION]",
        referenceLng: "en"
      }]
    }
  });
More information can be found here:
i18next-chained-backend
i18next-async-storage-backend
i18next-locize-backend​
Server side Next.js caching with filesystem
Similar to the normal server side caching with filesystem, you can use the same approach in a Next.js app in combination with next-i18next. It will load and cache resources from the filesystem and can be used in combination with the chained backend.
The config file, will probably look similar to this, but for a more complete example have a look at this example.
// next-i18next.config.js
const ChainedBackend = require('i18next-chained-backend')
const FSBackend = require('i18next-fs-backend/cjs')
const LocizeBackend = require('i18next-locize-backend/cjs')
​
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'de'],
  },
  backend: {
    backends: [
      FSBackend,
      LocizeBackend
    ],
    backendOptions: [{ // make sure public/locales_cache/en and public/locales_cache/de exists
      loadPath: './public/locales_cache/{{lng}}/{{ns}}.json',
      addPath: './public/locales_cache/{{lng}}/{{ns}}.json',
      expirationTime: 7 * 24 * 60 * 60 * 1000 // 7 days
    }, {
      projectId: 'd3b405cf-2532-46ae-adb8-99e88d876733',
      referenceLng: 'en'
    }]
  },
  use: [ChainedBackend],
  ns: ['common', 'footer', 'second-page'], // the namespaces needs to be listed here, to make sure they got preloaded
  serializeConfig: false, // because of the custom use i18next plugin
  // debug: true,
}
More information can be found here:
next-i18next-locize example
i18next-chained-backend
i18next-fs-backend
i18next-locize-backend​
We suggest not to use multiple backends with the i18next-chained-backend in combination with saveMissing or updateMissing, because it may happen, that the trigger for this is based on stale data.
More - Previous
Caching
Next - More
Backend Fallback
Last modified 1yr ago
Copy link
On this page
Browser caching with local storage
Server side caching with filesystem
React-native caching with AsyncStorage
Server side Next.js caching with filesystem