Using locize
Guides / Tips & Tricks
Alternative Caching with i18next
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.
Last modified 9mo ago