i18next Server side translations won't re-fetch the translation changes and update the page when using ISR in NextJS

Question

I want to load the translation from the backend in the nextjs frontend page. Here is the next-i18next config file, correct me if I am wrong.

const I18NextHttpBackend = require("i18next-http-backend/cjs");
const path = require("path");
module.exports = {
  i18n: {
    defaultLocale: "en",
    locales: ["en", "fr", "ar"],

    localeDetection: false,
    backend: {
      loadPath: "http://localhost:5000/translation/{{lng}}",
      requestOptions: {
        cache: "default",
        credentials: "same-origin",
        mode: "no-cors",
        allowMultiLoading: true,
        expirationTime: 5
      }
    }
  },
  debug: true,
  ns: ["common"],
  serializeConfig: false,
  use: [I18NextHttpBackend]
};

I import this config in the next config file like that

const { i18n } = require("./next-i18next.config");
module.exports = {
  i18n,
  reactStrictMode: true
};

In the pages directory in nextJS, I use (ISR) static props with revalidation to get the translations however when there's a change in the translations data from the CMS(backend), the translations won't change unless I stop the frontend and re-run it again. Here's the page

import NextI18nextConfig from "../../next-i18next.config";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import { useTranslation } from "next-i18next";
export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ["common"], NextI18nextConfig))
      // Will be passed to the page component as props
    },
    revalidate: 5
  };
}

export default function Products(props) {
  const { t, ready } = useTranslation("common");
  return (
    <main className={`flex min-h-screen flex-col items-center p-24`}>     
      <p>{ready ? t("user") : "not found"}</p>
      <p>{ready ? t("hello") : "not found"}</p>
    </main>
  );
}

I am also confused about localePath, loadPath and addpath when to use which?

Answer 1

Try to set reloadOnPrerender to true.

https://github.com/i18next/next-i18next#reloading-resources-in-development