Benchmarks vs browser cache

[re-thc]

Hi, when is a good time to use this backend vs relying on the browser cache? Localstorage isn't particularly fast. Has there been a benchmark that shows this is faster? Often re-fetching it is even faster than localstorage retrieval in cases like mobile. Thanks.

[jamuhl]

good question...which I can't really give an answer as I personally never had the need for caching in localStorage -> but there are devs using this...so must make sense in some scenarios

[darshakeyan]

Hi @jamuhl

I am using browser cache (local storage) in my product to store the all translations JSON file. I am facing issue while implementing this package to my product.

This is i18n.js file referring from https://www.i18next.com/how-to/caching#browser-caching-with-local-storage

i18n
  // pass the i18n instance to react-i18next.
  .use(Backend)
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    backend: {
      backends: [
        LocalStorageBackend, // primary backend
        HttpApi, // fallback backend
      ],
      backendOptions: [
        {
          /* options for primary backend */
          expirationTime: 7 * 24 * 60 * 60 * 1000, // 7 days
        },
        {
          /* options for secondary backend */
        },
      ],
    },
    lng: 'en-US',
    fallbackLng: false,
    ns: [],
    // debug: true,
    load: 'currentOnly',
    keySeparator: '.',

    interpolation: {
      escapeValue: false, // react already safes from xss,
    },
  });

I am using useTranslation hook for translating the text to different language.

Example.js

import React, { useEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';

function Filters() {
  const { t: translateReport } = useTranslation('reports');
  return(
        <Button>
          {translateReport('filters.buttons.clearAll')}
        </Button>,
        <Button>
          {translateReport('filters.buttons.apply')}
        </Button>,
  );
}

here is the report.json translation file

{
  "filters": {
    "title": "Filters",
    "buttons": {
      "clearAll": "Clear All Filters",
      "apply": "Apply"
    },
    "submittedAt": "Submitted at",
 }
}

Whenever I change something on JSON file Its not reflecting to local storage. I have to clear the cache from local storage in browser and then again have reload whole react application then the changes got reflected in JSON file.

Currently I am thinking of two approach

1. When JSON file modify needs to clear the local storage.
2. When any JS file modify in code then will clear the local storage.

It will be very helpful if you share some insight here.

[jamuhl]

Your two approaches have two issues. The backend runs in the browser and has no idea about if you modified a JSON.

use expiration time or versions to invalidate the cache: https://github.com/i18next/i18next-localstorage-backend#cache-backend-options

[jamuhl]

And during development don't use it at all

[darshakeyan]

Thanks @jamuhl I have misunderstand it actually now I got your point after reading below issue - https://github.com/i18next/i18next-localstorage-backend/issues/3

Every release we have to change the version of JSON which will update the JSON file in production correct me if I am wrong !

[jamuhl]

correct.