es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Problema de caché con los archivos de localización React-i18next.

Estoy utilizando React y react-i18next para la localización de mi aplicación. El problema es que después de actualizar los archivos de localización, a veces una versión antigua de mis archivos json se almacena en caché en el navegador. Esto se podría solucionar si el usuario limpia la caché, pero no puedo confiar en que los usuarios sepan cómo hacerlo. Los archivos JSON están en public\locales.

Acabo de descubrir cómo desactivar la caché en los archivos i18next translation.json

i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
fallbackLng: “en”,
debug: true,
backend: {
loadPath: ‘/locales/{{lng}}/{{ns}}.json’,
requestOptions: {
cache: ‘no-store’,
},
},
interpolation: {
escapeValue: false, // no es necesario para react ya que escapa de manera predeterminada
},
});

No es una solución ideal. La mejor solución sería que los archivos de traducción se recuperen nuevos después de cada compilación. Pero ahora esto no sucede; tengo la sensación de que el hash no se agrega a los archivos de traducción. ¿Cómo evitar la caché después de una nueva compilación?

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Una posible solución para evitar archivos de localización cacheados después de una nueva compilación es agregar una cadena de consulta única al loadPath de la configuración del backend. Esto puede lograrse al agregar una marca de tiempo o un valor hash al nombre del archivo JSON.

    Por ejemplo:

    i18n
      .use(Backend)
      .use(LanguageDetector)
      .use(initReactI18next)
      .init({
        fallbackLng: "en",
        debug: true,
        backend: {
          loadPath: '/locales/{{lng}}/{{ns}}.json?v=' + Date.now(), // agregar marca de tiempo como cadena de consulta
          requestOptions: {
            cache: 'no-store',
          },
        },
        interpolation: {
          escapeValue: false,
        },
      });
    

    Al agregar una marca de tiempo o un valor hash como cadena de consulta, el navegador lo ve como una nueva URL y recupera una copia actualizada del archivo desde el servidor. Esto garantiza que los archivos de localización estén siempre actualizados y evita problemas con archivos en caché en el navegador.

Comments are closed.