Using locize
Guides / Tips & Tricks
Backend Fallback
Do you want to define a fallback which uses local translations?
Browser fallback with local / bundled translations
With i18next you can configure a fallback backend to be used in the browser. It will try to load from your primary backend (in this case from your locize backend) and if the primary backend is not reachable or does not serve translations, your second backend (in this case local or bundled translations) will be used. This is all possible thanks to the chained backend.
1
import i18next from "i18next";
2
import ChainedBackend from "i18next-chained-backend";
3
import LocizeBackend from "i18next-locize-backend";
4
import resourcesToBackend from "i18next-resources-to-backend";
5
6
const bundledResources = {
7
en: {
8
translations: {
9
key: 'value'
10
}
11
}
12
};
13
14
i18next
15
.use(ChainedBackend)
16
.init({
17
fallbackLng: "en",
18
// ... your i18next config
19
backend: {
20
backends: [
21
LocizeBackend,
22
resourcesToBackend(bundledResources)
23
],
24
backendOptions: [{
25
projectId: "[PROJECTID]",
26
apiKey: "[APIKEY]",
27
version: "[VERSION]",
28
referenceLng: "en"
29
}]
30
}
31
});
Copied!
You can also lazy load the in memory translations, i.e. when using webpack
1
import i18next from "i18next";
2
import ChainedBackend from "i18next-chained-backend";
3
import LocizeBackend from "i18next-locize-backend";
4
import resourcesToBackend from "i18next-resources-to-backend";
5
6
i18next
7
.use(ChainedBackend)
8
.init({
9
fallbackLng: "en",
10
// ... your i18next config
11
backend: {
12
backends: [
13
LocizeBackend,
14
resourcesToBackend((lng, ns, clb) => {
15
import(`./locales/${lng}/${ns}.json`)
16
.then((resources) => clb(null, resources))
17
.catch(clb)
18
})
19
],
20
backendOptions: [{
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-resources-to-backend
i18next-locize-backend
Server side fallback with filesystem
On server side you can also use the i18next-fs-backend for example instead of the in memory fallback.
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
LocizeBackend,
14
FsBackend
15
],
16
backendOptions: [{
17
projectId: "[PROJECTID]",
18
apiKey: "[APIKEY]",
19
version: "[VERSION]",
20
referenceLng: "en"
21
}, {
22
loadPath: './locales_cache/{{lng}}/{{ns}}.json'
23
}]
24
}
25
});
Copied!
More information can be found here:
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.