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.
1
import i18next from "i18next";
2
import ChainedBackend from "i18next-chained-backend";
3
import LocizeBackend from "i18next-locize-backend";
4
import LocalStorageBackend from "i18next-localstorage-backend";
5
​
6
i18next
7
  .use(ChainedBackend)
8
  .init({
9
    fallbackLng: "en",
10
    // ... your i18next config
11
    backend: {
12
      backends: [
13
        LocalStorageBackend,
14
        LocizeBackend
15
      ],
16
      backendOptions: [{
17
        expirationTime: 7 * 24 * 60 * 60 * 1000 // 7 days
18
      }, {
19
        projectId: "[PROJECTID]",
20
        apiKey: "[APIKEY]",
21
        version: "[VERSION]",
22
        referenceLng: "en"
23
      }]
24
    }
25
  });
Copied!
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.
1
import i18next from "i18next";
2
import ChainedBackend from "i18next-chained-backend";
3
import LocizeBackend from "i18next-locize-backend";
4
import FsBackend from "i18next-fs-backend";
5
​
6
i18next
7
  .use(ChainedBackend)
8
  .init({
9
    fallbackLng: "en",
10
    // ... your i18next config
11
    backend: {
12
      backends: [
13
        FsBackend,
14
        LocizeBackend
15
      ],
16
      backendOptions: [{
17
        expirationTime: 7 * 24 * 60 * 60 * 1000, // 7 days
18
        loadPath: './locales_cache/{{lng}}/{{ns}}.json',
19
        addPath: './locales_cache/{{lng}}/{{ns}}.json' // make sure the folders "locales_cache/{{lng}}" exists
20
      }, {
21
        projectId: "[PROJECTID]",
22
        apiKey: "[APIKEY]",
23
        version: "[VERSION]",
24
        referenceLng: "en"
25
      }]
26
    }
27
  });
Copied!
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.
1
import i18next from "i18next";
2
import ChainedBackend from "i18next-chained-backend";
3
import LocizeBackend from "i18next-locize-backend";
4
import AsyncStorageBackend from "i18next-async-storage-backend";
5
​
6
i18next
7
  .use(ChainedBackend)
8
  .init({
9
    fallbackLng: "en",
10
    // ... your i18next config
11
    backend: {
12
      backends: [
13
        AsyncStorageBackend,
14
        LocizeBackend
15
      ],
16
      backendOptions: [{
17
        expirationTime: 7 * 24 * 60 * 60 * 1000 // 7 days
18
      }, {
19
        projectId: "[PROJECTID]",
20
        apiKey: "[APIKEY]",
21
        version: "[VERSION]",
22
        referenceLng: "en"
23
      }]
24
    }
25
  });
Copied!
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.
1
// next-i18next.config.js
2
const ChainedBackend = require('i18next-chained-backend')
3
const FSBackend = require('i18next-fs-backend/cjs')
4
const LocizeBackend = require('i18next-locize-backend/cjs')
5
​
6
module.exports = {
7
  i18n: {
8
    defaultLocale: 'en',
9
    locales: ['en', 'de'],
10
  },
11
  backend: {
12
    backends: [
13
      FSBackend,
14
      LocizeBackend
15
    ],
16
    backendOptions: [{ // make sure public/locales_cache/en and public/locales_cache/de exists
17
      loadPath: './public/locales_cache/{{lng}}/{{ns}}.json',
18
      addPath: './public/locales_cache/{{lng}}/{{ns}}.json',
19
      expirationTime: 7 * 24 * 60 * 60 * 1000 // 7 days
20
    }, {
21
      projectId: 'd3b405cf-2532-46ae-adb8-99e88d876733',
22
      referenceLng: 'en'
23
    }]
24
  },
25
  use: [ChainedBackend],
26
  ns: ['common', 'footer', 'second-page'], // the namespaces needs to be listed here, to make sure they got preloaded
27
  serializeConfig: false, // because of the custom use i18next plugin
28
  // debug: true,
29
}
Copied!
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 1mo ago
Copy link
Contents
Browser caching with local storage
Server side caching with filesystem
React-native caching with AsyncStorage
Server side Next.js caching with filesystem