How to force invalidate locales cache?

[yaman3bd]

hey, I am using i18next-http-backend with i18next-fs-backend, and when the user makes any edits to the locales from the admin dashboard I want to force delete the old cache and let i18next-fs-backend do its work and make new cache with the latest content, but I was not able to find a way to invalidate the cache.
in order to know if the user edited any key, I have implemented versioning for languages like: v0.0.0, v0.0.1, ... v1.0.0, etc
and I have the old version stored in the cookies and when I send a request to the API server, it returns the latest locales version if the returned version and the stored version do not match that means the user changed the locales and I want to have new cache with the newly edited locales so the user does not have to wait for the expirationTime to see the changes in action
how can I do that?

I mean smth like:

export const getServerSideProps: GetServerSideProps = async ({ req, locale }) => {
  const fetchAcademy = await fetch(`api.test/academy`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    }
  });

  const oldVersion = req.cookies["oldVersion"];
  const response = await fetchAcademy.json();

  if (oldVersion !== response.version) {
    //force delete old locales_cache
    //update oldVersion cookie
  }

  return {
    props: {
      //and anyway here the locales will be cached again because noting found in `loadPath`
      ...(await serverSideTranslations(
        locale ?? i18nextConfig.i18n.defaultLocale,
        ["common", "chapter_contents", "validation"],
        i18nextConfig
      ))
    }
  };
};

I could just simply do: fs.unlink("./public/locales_cache") but I am looking if there is any better way or an smth built-in

does anyone have a solution for this issue? or is there any best practice and better approach to solve it?
Thanks!

[adrai]

Deleting (unlinking) is the best workaround for this use case

[yaman3bd]

sorry for mentioning this in every discussion I have opened but working on a multi-tenant App is a bit challenging, however, I was trying to delete the locales_cache file but I faced an issue where the file will be deleted for all the tenants because I have only one app hosted on one server and the content served based on the tenant information/settings so that means I will have only one public folder in my server and deleting the cache from it will affect the other tenants, so, for now, I will disable the cache layer entirely, and I will load the locales from the server on each page reload, and I will have the cache on the request-level, so to achieve this, is using i18next-multiload-backend-adapter and i18next-http-backend enough?
also, there is something I do not understand, at the initial page load 2 requests are sent one with the locales I have in my config and one specifically with en language, and each time I change the page the namespaces of the first page I visit are requested again on each route/page change, I have attached a video to show what I mean:

my next-i18next.config.js:

const HttpBackend = require("i18next-http-backend/cjs");
const MultiLoadBackendAdapter = require("i18next-multiload-backend-adapter/cjs");

const { axios } = require("../lib/axios");
const env = process.env.NODE_ENV;

module.exports = {
  i18n: {
    locales: ["ar", "en"],
    defaultLocale: "ar"
  },
  ns: [
    "auth",
    "otp",
    "common",
    "validation",
    "students",
    "reviews",
    "comments",
    "share",
    "content_type",
    "chapter_contents",
    "course_player",
    "bank",
    "wallet",
    "empty_sections",
    "account",
    "profile",
    "course_page",
    "product_page",
    "verify_certificate",
    "sessions",
    "bundle_page",
    "blog",
    "store",
    "instructors",
    "countries",
    "thank_you_page",
    "shopping_cart"
  ],
  defaultNS: "common",
  maxParallelReads: 30,
  serializeConfig: false,
  reloadOnPrerender: env === "development",
  use: [MultiLoadBackendAdapter],
  backend: {
    backend: HttpBackend,
    backendOption: {
      loadPath: "{{lng}}|{{ns}}",
      request: async (options, url, payload, callback) => {
        try {
          const [lng, ns] = url.split("|");

          await axios
            .get("/translations", {
              params: { group: ns.split("+") }
            })
            .then((response) => {
              callback(null, {
                data: response.data.data,
                status: 200
              });
            })
            .catch((error) => {
              // eslint-disable-next-line no-console
              console.log("response error: ", error.response.data);
              callback(null, {
                status: 500
              });
            });
        } catch (e) {
          // eslint-disable-next-line no-console
          console.log("catch error: ", e);
          callback(null, {
            status: 500
          });
        }
      }
    }
  }
};

screen-recording-2023-09-23-at-44806-pm_Un4ogVlx.mp4

sorry the video is 1 minute long but I had to show the full scenario, could you please help me understand what is happening?