Caching

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 HttpBackend from "i18next-http-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
HttpBackend
15
],
16
backendOptions: [{
17
expirationTime: 7 * 24 * 60 * 60 * 1000 // 7 days
18
}, {
19
loadPath: '/locales/{{lng}}/{{ns}}.json'
20
}]
21
}
22
});
Copied!

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 HttpBackend from "i18next-http-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
HttpBackend
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
loadPath: '/locales/{{lng}}/{{ns}}.json'
22
}]
23
}
24
});
Copied!
More information can be found here: i18next-chained-backend i18next-fs-backend i18next-http-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 HttpBackend from "i18next-http-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
HttpBackend
15
],
16
backendOptions: [{
17
expirationTime: 7 * 24 * 60 * 60 * 1000 // 7 days
18
}, {
19
loadPath: '/locales/{{lng}}/{{ns}}.json'
20
}]
21
}
22
});
Copied!

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 by locize.
1
// next-i18next.config.js
2
const ChainedBackend = require('i18next-chained-backend')
3
const FSBackend = require('i18next-fs-backend/cjs')
4
const HttpBackend = require('i18next-http-backend/cjs')
5
6
module.exports = {
7
i18n: {
8
defaultLocale: 'en',
9
locales: ['en', 'de'],
10
},
11
backend: {
12
backends: [
13
FSBackend,
14
HttpBackend
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
loadPath: '/locales/{{lng}}/{{ns}}.json'
22
}]
23
},
24
use: [ChainedBackend],
25
ns: ['common', 'footer', 'second-page'], // the namespaces needs to be listed here, to make sure they got preloaded
26
serializeConfig: false, // because of the custom use i18next plugin
27
// debug: true,
28
}
Copied!
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.
Last modified 5mo ago