Alternative Caching with i18next

In some scenarios, you may want more control over how translations are cached—especially outside of browser-based applications or when you need offline support. i18next provides flexible caching options for browser, server, React Native, and Next.js environments.

Browser caching with local storage

You can configure i18next to cache resources in the browser using localStorage. This is especially useful for offline support and reducing network requests. Combine it with the chained backend to fall back to the Locize backend if needed.

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]"
      }]
    }
  });

More information:

Server-side caching with filesystem

For server-side applications, you can cache translations on disk using the filesystem backend. This reduces API calls and speeds up translation loading. Again, you can use the chained backend to fall back to Locize if the cache is missing or expired.

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}}" exist
      }, {
        projectId: "[PROJECTID]",
        apiKey: "[APIKEY]",
        version: "[VERSION]"
      }]
    }
  });

More information:

React Native caching with AsyncStorage

For React Native apps, you can cache translations using AsyncStorage. This works well for mobile offline support. Use it with the chained backend to fall back to Locize as needed.

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]"
      }]
    }
  });

More information:

Server-side Next.js caching with filesystem

For Next.js apps, you can use the same filesystem caching approach in combination with next-i18next. This allows you to cache translations on disk and fall back to Locize as needed.

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 exist
      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'
    }]
  },
  use: [ChainedBackend],
  ns: ['common', 'footer', 'second-page'], // the namespaces need to be listed here to ensure they are preloaded
  serializeConfig: false, // because of the custom use i18next plugin
  // debug: true,
}

More information:

Note: We suggest not to use multiple backends with the i18next-chained-backend in combination with saveMissing or updateMissing, because triggers for these features may be based on stale data.