Caching Issue with Multi-Tenant Application

[yaman3bd]

Hello, I am currently working on a multi-tenant application. The content of each tenant is served based on the host, which is set as a header in each request sent to the API. Here’s a snippet of my code:

const result = await axios({
  url,
  headers: {
    ...headers,
    //passing the tenant host as a header
    "X-Tenant-Domain": appState.tenantHost
  },
  method,
  data,
  params
});

but I’m facing a caching issue in next-i18next. If any tenant updates a translation key, the changes are not reflected until I manually restart the server.

another issue is that if Tenant1 updates a key and sends the very first request to the server after a restart, i18next caches the translations based on Tenant1. Now, if Tenant2 opens their site, they see the updated values from Tenant1, which is not the expected behavior.
Here’s a step-by-step breakdown of the issue:

1. Tenant1 updates a translation key.
2. Tenant1 changes are not reflected until the server is manually restarted.
3. After the server restarts, and on the very first request, if Tenant2 accesses the site, they see Tenant1 updated translations.

here is what my setup looks like:
_app.tsx:

import { appWithTranslation } from 'next-i18next'
import i18nextConfig from "@/next-i18next.config.js";

const MyApp = ({ Component, pageProps }) => (
  <Component {...pageProps} />
)

export default appWithTranslation(MyApp, i18nextConfig)

in each page's getServerSideProps:

import { serverSideTranslations } from 'next-i18next/serverSideTranslations'

import i18nextConfig from "@/next-i18next.config.js";

export const getServerSideProps = async ({ locale, req }) => {
  const host = req.headers.host;

  i18nextConfig.backend.backendOption.customHeaders = {
    "X-Tenant-Domain": host
  };

  return {
    props: {
      ...(await serverSideTranslations(locale, ["common", "footer"], i18nextConfig))
    }
  };
};

next-i18next.config.js:

const HttpBackend = require("i18next-http-backend/cjs");
const MultiLoadBackendAdapter = require("i18next-multiload-backend-adapter/cjs");
const { axios, getTenantHost } = require("./lib/axios");
const IS_CLIENT = typeof window !== "undefined";
const env = process.env.NODE_ENV;

module.exports = {
  i18n: {
    locales: ["ar", "en"],
    defaultLocale: "ar"
  },
  ns: [...],
  defaultNS: "common",
  maxParallelReads: 30,
  serializeConfig: false,
  reloadOnPrerender: env === "development",
  use: [MultiLoadBackendAdapter],
  backend: {
    backend: HttpBackend,
    backendOption: {
      loadPath: "{{lng}}|{{ns}}",
      customHeaders: {},
      request: async (options, url, payload, callback) => {
        try {
          const [lng, ns] = url.split("|");

          const headers = options.customHeaders || {};

          if (IS_CLIENT && !headers["X-Tenant-Domain"]) {
            headers["X-Tenant-Domain"] = getTenantHost(window.location.host);
          }

          await axios
            .get("/translations", {
              params: { group: ns.split("+") },
              headers
            })
            .then((response) => {
              callback(null, {
                data: response.data.data,
                status: 200
              });
            })
            .catch((error) => {
              callback(null, {
                status: 500
              });
            });
        } catch (e) {
          callback(null, {
            status: 500
          });
        }
      }
    }
  }
};

I could try to set reloadOnPrerender to true but it will cause deadly memory issues.
and I can not use revalidate option in getStaticProps because I am not building an ISR app and in my application, I am I have to use getServerSideProps for data fetching.

I would appreciate any guidance on how to resolve this issue. Thank you!

[yaman3bd]

@adrai, could you help me with this issue, please?
I have searched in all the issues in the repo that related to caching and resources reloading and searched all over Google but could not find any helpful solution, except setting reloadOnPrerender to true but I am scared it causes memory issues because translations files are quite large.
also, I am not using any caching layer in my setup, so why did this issue happen?
like why the translations are not updating each time I reload the page or close the browser and reopen it?

[yaman3bd]

I am able now to deploy my app, but when I was testing if scoped ns working in real production env, it did not seem to work as expected, still, a conflict happens, I need to reload the page 2/3 times to see the correct tenant translations and when I open another tenant site and reload the page I will see the translation from tenant 1 until a new page reload I will see the correct translations but on tenant 1 the translations will also be wrong, and it will get them from the prev tenant. even my API backend returns the correct translations
I really tried to create a minimal and reproducible repo but I could not since the issue is not happening on the local server, it occurs after I deploy my app, and my code and setup look exactly like this one here:
https://github.com/yaman3bd/i18next-caching

---

is there any way please I could get your help debugging the issue in my production project?

[adrai]

This sounds to be Next.js internal/specific behaviours... so best would be you ask the Vercel/Next.js team for help

[yaman3bd]

I made some debugging to understand more about what is happening, the issue seems to be with i18next backend,
in the request method the received namespaces are not the ones I am passing from serverSideTranslations or useTranslation
when I take the namespaces from the url, on the first load:
tenant 1:
ns before passing to serverSideTranslations:

[ 'common=1', 'validation=1', 'auth=1', 'otp=1' ]

namespaces after I get them from request->url param:

const groupArr = ns.split("+");  //[ 'common=1', 'validation=1', 'auth=1', 'otp=1' ]

until now everything is working fine, but when I open tenant 2 site:
ns before passing to serverSideTranslations:

['common=2', 'validation=2', 'auth=2', 'otp=2']

the namespaces here have different key which is 2 not 1 (different namespace)

BUT HERE IS THE ISSUE:

when I get namespaces from request->url param:

['common=1', 'validation=1', 'auth=1', 'otp=1']

the namespaces received from the request method are not updated, they are cached from the previously sent request
when I refresh the page I get the correct namespaces
is this because i18next creates a singleton and shares it between states/ lifecycle?
or namespaces not updating because they're being cached in memory?

[adrai]

Who responds to the request? Isn't that your axios request that goes to /translations ? which "server" logic responds there?
Can you check the response body?
How does the log output look like when you set debug: true in your i18next config?

[yaman3bd]

SORRY, the logs are too long,
yeah, axios request handles the response, on the server logic: I am loading the translations from my DB based on the tenant host.
and the response body is returning the right data from API
here is the log file after I made this scenario:
open tenant 1 site everything working, and translations are for tenant 1.
on the same browser opened a new tap and opened tenant 2 site everything working, and translations are for tenant 2.
then come back to tenant 1 site, reload the page the translations are for tenant 2.

server log when tenant 1 sends request:

serverSideTranslations  namespaces [ 'common=1', 'validation=1', 'auth=1', 'otp=1' ]
i18next: languageChanged ar
i18next: initialized {
  debug: true,
  initImmediate: undefined,
  ns: [],
  defaultNS: 'common',
  fallbackLng: [ 'ar' ],
  fallbackNS: false,
  supportedLngs: false,
  nonExplicitSupportedLngs: false,
  load: 'currentOnly',
  preload: [ 'ar', 'en' ],
  simplifyPluralSuffix: true,
  keySeparator: '.',
  nsSeparator: ':',
  pluralSeparator: '_',
  contextSeparator: '_',
  partialBundledLanguages: false,
  saveMissing: false,
  updateMissing: false,
  saveMissingTo: 'fallback',
  saveMissingPlurals: true,
  missingKeyHandler: false,
  missingInterpolationHandler: false,
  postProcess: false,
  postProcessPassResolved: false,
  returnNull: true,
  returnEmptyString: true,
  returnObjects: false,
  joinArrays: false,
  returnedObjectHandler: false,
  parseMissingKeyHandler: false,
  appendNamespaceToMissingKey: false,
  appendNamespaceToCIMode: false,
  overloadTranslationOptionHandler: [Function: handle],
  interpolation: {
    escapeValue: false,
    format: [Function: bound format],
    prefix: '{{',
    suffix: '}}',
    formatSeparator: ',',
    unescapePrefix: '-',
    nestingPrefix: '$t(',
    nestingSuffix: ')',
    nestingOptionsSeparator: ',',
    maxReplaces: 1000,
    skipOnVariables: true
  },
  errorStackTraceLimit: 0,
  localeExtension: 'json',
  localePath: './public/locales',
  localeStructure: '{{lng}}/{{ns}}',
  react: { useSuspense: false },
  reloadOnPrerender: true,
  serializeConfig: false,
  use: [ [Function: Backend] { type: 'backend' } ],
  maxParallelReads: 30,
  backend: {
    backend: [Function: Backend] { type: 'backend' },
    backendOption: {
      loadPath: '{{lng}}|{{ns}}',
      customHeaders: [Object],
      request: [AsyncFunction: request],
      addPath: '/locales/add/{{lng}}/{{ns}}',
      allowMultiLoading: false,
      parse: [Function: parse],
      stringify: [Function: stringify],
      parsePayload: [Function: parsePayload],
      parseLoadPayload: [Function: parseLoadPayload],
      reloadInterval: 3600000,
      queryStringParams: {},
      crossDomain: false,
      withCredentials: false,
      overrideMimeType: false,
      requestOptions: [Object]
    },
    debounceInterval: 50
  },
  lng: 'ar',
  defaultLocale: 'ar',
  locales: [ 'ar', 'en' ],
  ignoreJSONStructure: true
}
request->url:  [ 'common=1', 'validation=1', 'auth=1', 'otp=1' ]
ns after removing cache key to send them to back end:  [ 'common', 'validation', 'auth', 'otp' ]
cacheKey:  1

axios request response data:
{
  ar: {
    auth: {
      welcome_back: 'sign in Tenant 1',
      welcome_back_description: 'welcome back!  Tenant 1',
      welcome_back_description_email_only: 'welcome back!  Tenant 1',
      login_via: 'Log in via: Tenant 1'
    },
    otp: {
      verify_email: 'verify your e-mail Tenant 1',
      verify_email_description: 'A text message was sent to {{email}}.  Tenant 1',
      change_email: 'Change email Tenant 1'
    },
    common: {
      save: 'save Tenant 1',
      delete: 'delete Tenant 1',
      edit: 'amendment Tenant 1',
      an_hour: 'hour Tenant 1',
      a_minute: 'minute Tenant 1',
      a_day: 'today Tenant 1'
    },
    validation: {
      field_required: 'This field is required Tenant 1',
      field_file_size_invalid: 'File size must be less than {{size}} MB Tenant 1',
      field_file_type_invalid: 'The file must be of type {{type}} Tenant 1',
      field_file_min_files: 'Must download {{files}} File(s) at least Tenant 1',
      field_file_max_files: 'Must download {{files}} File(s) at most Tenant 1',
      field_invalid_slug_format: 'The link can contain only English or Arabic letters, numbers, or - Tenant 1'
    }
  }
}

after adding cache key again and passing the data to the callback:
{
  ar: {
    'auth=1': {
      welcome_back: 'sign in Tenant 1',
      welcome_back_description: 'welcome back!  Tenant 1',
      welcome_back_description_email_only: 'welcome back!  Tenant 1',
      login_via: 'Log in via: Tenant 1'
    },
    'otp=1': {
      verify_email: 'verify your e-mail Tenant 1',
      verify_email_description: 'A text message was sent to {{email}}.  Tenant 1',
      change_email: 'Change email Tenant 1'
    },
    'common=1': {
      save: 'save Tenant 1',
      delete: 'delete Tenant 1',
      edit: 'amendment Tenant 1',
      an_hour: 'hour Tenant 1',
      a_minute: 'minute Tenant 1',
      a_day: 'today Tenant 1'
    },
    'validation=1': {
      field_required: 'This field is required Tenant 1',
      field_file_size_invalid: 'File size must be less than {{size}} MB Tenant 1',
      field_file_type_invalid: 'The file must be of type {{type}} Tenant 1',
      field_file_min_files: 'Must download {{files}} File(s) at least Tenant 1',
      field_file_max_files: 'Must download {{files}} File(s) at most Tenant 1',
      field_invalid_slug_format: 'The link can contain only English or Arabic letters, numbers, or - Tenant 1'
    }
  }
}
i18next::backendConnector: loaded namespace common=1 for language ar {
  save: 'save Tenant 1',
  delete: 'delete Tenant 1',
  edit: 'amendment Tenant 1',
  an_hour: 'hour Tenant 1',
  a_minute: 'minute Tenant 1',
  a_day: 'today Tenant 1'
}
i18next::backendConnector: loaded namespace validation=1 for language ar {
  field_required: 'This field is required Tenant 1',
  field_file_size_invalid: 'File size must be less than {{size}} MB Tenant 1',
  field_file_type_invalid: 'The file must be of type {{type}} Tenant 1',
  field_file_min_files: 'Must download {{files}} File(s) at least Tenant 1',
  field_file_max_files: 'Must download {{files}} File(s) at most Tenant 1',
  field_invalid_slug_format: 'The link can contain only English or Arabic letters, numbers, or - Tenant 1',
  field_min_length: 'The field must be at least {{min}} Letter(s). Tenant 1'
}
i18next::backendConnector: loaded namespace auth=1 for language ar {
  welcome_back: 'sign in Tenant 1',
  welcome_back_description: 'welcome back!  Tenant 1',
  welcome_back_description_email_only: 'welcome back!  Tenant 1',
  login_via: 'Log in via: Tenant 1'
}
i18next::backendConnector: loaded namespace otp=1 for language ar {
  verify_email: 'verify your e-mail Tenant 1',
  verify_email_description: 'A text message was sent to {{email}}.  Tenant 1',
  change_email: 'Change email Tenant 1'
}
i18next::backendConnector: loaded namespace common=1 for language en {}
i18next::backendConnector: loaded namespace validation=1 for language en {}
i18next::backendConnector: loaded namespace auth=1 for language en {}
i18next::backendConnector: loaded namespace otp=1 for language en {}
i18next: languageChanged ar
i18next::translator: missingKey ar validation=1 field_invalid field_invalid
i18next::translator: missingKey ar validation=1 field_invalid_format field_invalid_format

the same logs I get when open tenant 2 sends the request but only the cache key is different instead of 1 it is 2 and its working as expected so I will not provide it

server log when tenant 1 sends request after revisit and reload:

serverSideTranslations  namespaces [ 'common=2', 'validation=2', 'auth=2', 'otp=2' ]
request->url::  [ 'common=1', 'validation=1', 'auth=1', 'otp=1' ]
ns after removing cache key to send them to back end::  [ 'common', 'validation', 'auth', 'otp' ]
cacheKey:  1

axios request response data:
{
  ar: {
    auth: {
      welcome_back: 'sign in Tenant 2',
      welcome_back_description: 'welcome back!  Tenant 2',
      welcome_back_description_email_only: 'welcome back!  Tenant 2',
      login_via: 'Log in via: Tenant 2'
    },
    otp: {
      verify_email: 'verify your e-mail Tenant 2',
      verify_email_description: 'A text message was sent to {{email}}.  Tenant 2',
      change_email: 'Change email Tenant 2'
    },
    common: {
      save: 'save Tenant 2',
      delete: 'delete Tenant 2',
      edit: 'amendment Tenant 2',
      an_hour: 'hour Tenant 2',
      a_minute: 'minute Tenant 2',
      a_day: 'today Tenant 2'
    },
    validation: {
      field_required: 'This field is required Tenant 2',
      field_file_size_invalid: 'File size must be less than {{size}} MB Tenant 2',
      field_file_type_invalid: 'The file must be of type {{type}} Tenant 2',
      field_file_min_files: 'Must download {{files}} File(s) at least Tenant 2',
      field_file_max_files: 'Must download {{files}} File(s) at most Tenant 2',
      field_invalid_slug_format: 'The link can contain only English or Arabic letters, numbers, or - Tenant 2'
    }
  }
}

after adding cache key again and passing the data to the callback:
{
  ar: {
    'auth=1': {
      welcome_back: 'sign in Tenant 2',
      welcome_back_description: 'welcome back!  Tenant 2',
      welcome_back_description_email_only: 'welcome back!  Tenant 2',
      login_via: 'Log in via: Tenant 2'
    },
    'otp=1': {
      verify_email: 'verify your e-mail Tenant 2',
      verify_email_description: 'A text message was sent to {{email}}.  Tenant 2',
      change_email: 'Change email Tenant 2'
    },
    'common=1': {
      save: 'save Tenant 2',
      delete: 'delete Tenant 2',
      edit: 'amendment Tenant 2',
      an_hour: 'hour Tenant 2',
      a_minute: 'minute Tenant 2',
      a_day: 'today Tenant 2'
    },
    'validation=1': {
      field_required: 'This field is required Tenant 2',
      field_file_size_invalid: 'File size must be less than {{size}} MB Tenant 2',
      field_file_type_invalid: 'The file must be of type {{type}} Tenant 2',
      field_file_min_files: 'Must download {{files}} File(s) at least Tenant 2',
      field_file_max_files: 'Must download {{files}} File(s) at most Tenant 2',
      field_invalid_slug_format: 'The link can contain only English or Arabic letters, numbers, or - Tenant 2'
    }
  }
}
i18next::backendConnector: loaded namespace common=1 for language ar {
  save: 'save Tenant 2',
  delete: 'delete Tenant 2',
  edit: 'amendment Tenant 2',
  an_hour: 'hour Tenant 2',
  a_minute: 'minute Tenant 2',
  a_day: 'today Tenant 2'
}
i18next::backendConnector: loaded namespace validation=1 for language ar {
  field_required: 'This field is required Tenant 2',
  field_file_size_invalid: 'File size must be less than {{size}} MB Tenant 2',
  field_file_type_invalid: 'The file must be of type {{type}} Tenant 2',
  field_file_min_files: 'Must download {{files}} File(s) at least Tenant 2',
  field_file_max_files: 'Must download {{files}} File(s) at most Tenant 2',
  field_invalid_slug_format: 'The link can contain only English or Arabic letters, numbers, or - Tenant 2'
}
i18next::backendConnector: loaded namespace auth=1 for language ar {
  welcome_back: 'sign in Tenant 2',
  welcome_back_description: 'welcome back!  Tenant 2',
  welcome_back_description_email_only: 'welcome back!  Tenant 2',
  login_via: 'Log in via: Tenant 2'
}
i18next::backendConnector: loaded namespace otp=1 for language ar {
  verify_email: 'verify your e-mail Tenant 2',
  verify_email_description: 'A text message was sent to {{email}}.  Tenant 2',
  change_email: 'Change email Tenant 2'
}

i18next log from clinet for tenant 1:

{
    debug: true,
    initImmediate: true,
    ns: ["common=1", "validation=1", "auth=1", "otp=1"],
    defaultNS: "common",
    fallbackLng: ["ar"],
    fallbackNS: false,
    supportedLngs: false,
    nonExplicitSupportedLngs: false,
    load: "currentOnly",
    preload: false,
    simplifyPluralSuffix: true,
    keySeparator: ".",
    nsSeparator: ":",
    pluralSeparator: "_",
    contextSeparator: "_",
    partialBundledLanguages: false,
    saveMissing: false,
    updateMissing: false,
    saveMissingTo: "fallback",
    saveMissingPlurals: true,
    missingKeyHandler: false,
    missingInterpolationHandler: false,
    postProcess: false,
    postProcessPassResolved: false,
    returnNull: true,
    returnEmptyString: true,
    returnObjects: false,
    joinArrays: false,
    returnedObjectHandler: false,
    parseMissingKeyHandler: false,
    appendNamespaceToMissingKey: false,
    appendNamespaceToCIMode: false,
    interpolation: {
      escapeValue: false,
      prefix: "{{",
      suffix: "}}",
      formatSeparator: ",",
      unescapePrefix: "-",
      nestingPrefix: "$t(",
      nestingSuffix: ")",
      nestingOptionsSeparator: ",",
      maxReplaces: 1000,
      skipOnVariables: true
    },
    errorStackTraceLimit: 0,
    localeExtension: "json",
    localePath: "./public/locales",
    localeStructure: "{{lng}}/{{ns}}",
    react: {
      useSuspense: false
    },
    reloadOnPrerender: true,
    serializeConfig: false,
    use: [null],
    maxParallelReads: 30,
    backend: {
      backendOption: {
        loadPath: "{{lng}}|{{ns}}",
        customHeaders: {},
        addPath: "/locales/add/{{lng}}/{{ns}}",
        allowMultiLoading: false,
        reloadInterval: false,
        queryStringParams: {},
        crossDomain: false,
        withCredentials: false,
        overrideMimeType: false,
        requestOptions: {
          mode: "cors",
          credentials: "same-origin",
          cache: "default"
        }
      },
      debounceInterval: 50
    },
    lng: "ar",
    defaultLocale: "ar",
    locales: ["ar", "en"],
    resources: {
      ar: {
        "common=1": {
          save: "save Tenant 2",
          delete: "delete Tenant 2",
          edit: "amendment Tenant 2",
          an_hour: "hour Tenant 2",
          a_minute: "minute Tenant 2",
          a_day: "today Tenant 2"
        },
        "validation=1": {
          field_required: "This field is required Tenant 2",
          field_file_size_invalid: "File size must be less than {{size}} MB Tenant 2",
          field_file_type_invalid: "The file must be of type {{type}} Tenant 2",
          field_file_min_files: "Must download {{files}} File(s) at least Tenant 2",
          field_file_max_files: "Must download {{files}} File(s) at most Tenant 2",
          field_invalid_slug_format: "The link can contain only English or Arabic letters, numbers, or - Tenant 2"
        },
        "auth=1": {
          welcome_back: "sign in Tenant 2",
          welcome_back_description: "welcome back!  Tenant 2",
          welcome_back_description_email_only: "welcome back!  Tenant 2",
          login_via: "Log in via: Tenant 2"
        },
        "otp=1": {
          verify_email: "verify your e-mail Tenant 2",
          verify_email_description: "A text message was sent to {{email}}.  Tenant 2",
          change_email: "Change email Tenant 2"
        }
      }
    },
    ignoreJSONStructure: true
  };

tenant 2:

{
    debug: true,
    initImmediate: true,
    ns: ["common=2", "validation=2", "auth=2", "otp=2"],
    defaultNS: "common",
    fallbackLng: ["ar"],
    fallbackNS: false,
    supportedLngs: false,
    nonExplicitSupportedLngs: false,
    load: "currentOnly",
    preload: false,
    simplifyPluralSuffix: true,
    keySeparator: ".",
    nsSeparator: ":",
    pluralSeparator: "_",
    contextSeparator: "_",
    partialBundledLanguages: false,
    saveMissing: false,
    updateMissing: false,
    saveMissingTo: "fallback",
    saveMissingPlurals: true,
    missingKeyHandler: false,
    missingInterpolationHandler: false,
    postProcess: false,
    postProcessPassResolved: false,
    returnNull: true,
    returnEmptyString: true,
    returnObjects: false,
    joinArrays: false,
    returnedObjectHandler: false,
    parseMissingKeyHandler: false,
    appendNamespaceToMissingKey: false,
    appendNamespaceToCIMode: false,
    interpolation: {
      escapeValue: false,
      prefix: "{{",
      suffix: "}}",
      formatSeparator: ",",
      unescapePrefix: "-",
      nestingPrefix: "$t(",
      nestingSuffix: ")",
      nestingOptionsSeparator: ",",
      maxReplaces: 1000,
      skipOnVariables: true
    },
    errorStackTraceLimit: 0,
    localeExtension: "json",
    localePath: "./public/locales",
    localeStructure: "{{lng}}/{{ns}}",
    react: {
      useSuspense: false
    },
    reloadOnPrerender: true,
    serializeConfig: false,
    use: [null],
    maxParallelReads: 30,
    backend: {
      backendOption: {
        loadPath: "{{lng}}|{{ns}}",
        customHeaders: {},
        addPath: "/locales/add/{{lng}}/{{ns}}",
        allowMultiLoading: false,
        reloadInterval: false,
        queryStringParams: {},
        crossDomain: false,
        withCredentials: false,
        overrideMimeType: false,
        requestOptions: {
          mode: "cors",
          credentials: "same-origin",
          cache: "default"
        }
      },
      debounceInterval: 50
    },
    lng: "ar",
    defaultLocale: "ar",
    locales: ["ar", "en"],
    resources: {
      ar: {
        "common=2": {
          save: "save Tenant 2",
          delete: "delete Tenant 2",
          edit: "amendment Tenant 2",
          an_hour: "hour Tenant 2",
          a_minute: "minute Tenant 2",
          a_day: "today Tenant 2"
        },
        "validation=2": {
          field_required: "This field is required Tenant 2",
          field_file_size_invalid: "File size must be less than {{size}} MB Tenant 2",
          field_file_type_invalid: "The file must be of type {{type}} Tenant 2",
          field_file_min_files: "Must download {{files}} File(s) at least Tenant 2",
          field_file_max_files: "Must download {{files}} File(s) at most Tenant 2",
          field_invalid_slug_format: "The link can contain only English or Arabic letters, numbers, or - Tenant 2"
        },
        "auth=2": {
          welcome_back: "sign in Tenant 2",
          welcome_back_description: "welcome back!  Tenant 2",
          welcome_back_description_email_only: "welcome back!  Tenant 2",
          login_via: "Log in via: Tenant 2"
        },
        "otp=2": {
          verify_email: "verify your e-mail Tenant 2",
          verify_email_description: "A text message was sent to {{email}}.  Tenant 2",
          change_email: "Change email Tenant 2"
        }
      }
    },
    ignoreJSONStructure: true
  };

[adrai]

serverSideTranslations passes =2
request->url:: passes =1

[adrai]

Also, you could try to "remove" the serverSideTranslations call completely and return something hardcoded... something for tenant1 and something different for tenant2... and check if the same problem occurs... That way we could make sure this is not at all related to next-i18next

[adrai]

btw: in the next.js discussion, you may want to say this is only occurring on your deployed environment

[adrai]

fyi: it may also be Forge is caching something...
did you try to deploy it on Vercel for example?

[yaman3bd]

Just another small question: What is returned by the "serverSideTranslations" function?

followed the same scenario mentioned previously:
open tenant 1 site everything working, and translations are for tenant 1.
on the same browser opened a new tap and opened tenant 2 site everything working, and translations are for tenant 2.
then come back to tenant 1 site, reload the page the translations are for tenant 2.

---

server log returned from serverSideTranslations when tenant 1 sends request:

{
  _nextI18Next: {
    initialI18nStore: {
      ar: {
        'common=1': {
          save: 'save Tenant 1',
          delete: 'delete Tenant 1',
          edit: 'amendment Tenant 1',
          an_hour: 'hour Tenant 1',
          a_minute: 'minute Tenant 1',
          a_day: 'today Tenant 1'
        },
        'validation=1': {
          field_required: 'This field is required Tenant 1',
          field_file_size_invalid: 'File size must be less than {{size}} MB Tenant 1',
          field_file_type_invalid: 'The file must be of type {{type}} Tenant 1',
          field_file_min_files: 'Must download {{files}} File(s) at least Tenant 1',
          field_file_max_files: 'Must download {{files}} File(s) at most Tenant 1',
          field_invalid_slug_format: 'The link can contain only English or Arabic letters, numbers, or - Tenant 1'
        },
        'auth=1': {
          welcome_back: 'sign in Tenant 1',
          welcome_back_description: 'welcome back!  Tenant 1',
          welcome_back_description_email_only: 'welcome back!  Tenant 1'
        },
        'otp=1': {
          verify_email: 'verify your e-mail Tenant 1',
          verify_email_description: 'A text message was sent to {{email}}.  Tenant 1',
          change_email: 'Change email Tenant 1'
        }
      }
    },
    initialLocale: 'ar',
    ns: [ 'common=1', 'validation=1', 'auth=1', 'otp=1' ],
    userConfig: null
  }
}

the same returned logs I get when open tenant 2 sends the request but only the cache key is different instead of 1 it is 2 and its working as expected so I will not provide it

server log returned from serverSideTranslations when tenant 1 sends request after revisit and reload:

{
  _nextI18Next: {
    initialI18nStore: {
      ar: {
        'common=1': {
          save: 'save Tenant 2',
          delete: 'delete Tenant 2',
          edit: 'amendment Tenant 2',
          an_hour: 'hour Tenant 2',
          a_minute: 'minute Tenant 2',
          a_day: 'today Tenant 2'
        },
        'validation=1': {
          field_required: 'This field is required Tenant 2',
          field_file_size_invalid: 'File size must be less than {{size}} MB Tenant 2',
          field_file_type_invalid: 'The file must be of type {{type}} Tenant 2',
          field_file_min_files: 'Must download {{files}} File(s) at least Tenant 2',
          field_file_max_files: 'Must download {{files}} File(s) at most Tenant 2',
          field_invalid_slug_format: 'The link can contain only English or Arabic letters, numbers, or - Tenant 2'
        },
        'auth=1': {
          welcome_back: 'sign in Tenant 2',
          welcome_back_description: 'welcome back!  Tenant 2',
          welcome_back_description_email_only: 'welcome back!  Tenant 2',
          login_via: 'Log in via: Tenant 2'
        },
        'otp=1': {
          verify_email: 'verify your e-mail Tenant 2',
          verify_email_description: 'A text message was sent to {{email}}.  Tenant 2',
          change_email: 'Change email Tenant 2'
        }
      }
    },
    initialLocale: 'ar',
    ns: [ 'common=1', 'validation=1', 'auth=1', 'otp=1' ],
    userConfig: null
  }
}

and when I tried to hardcoded the locals object, following the same scenario first load tenant 1 everything worked as expected, when tried to load tenant 2, I got a Hydration error, and then locals for tenant 2 appeared, then back to tenant 1 reloaded the page everything worked the translations for tenant 1.

Screen.Recording.2024-02-01.at.11.32.03.PM.mov

---

I think it is related to i18n.loadNamespaces/addResource like it is caching the assets in the file system of the server or forge caching something.
now I will try to deploy it on Vercel and try with both hardcoded locales and serverSideTranslations locals and let you know

[yaman3bd]

What is the url passed to the request function? request: async (options, url, payload, callback) => { if that is already wrong (=1) I assume Next.js does not send "updated" serverSideTranslations (props) and uses some internal cached props used for the previous rendered page... But for sure i18next is not actively caching anything

I tried to disable Next.js cache completely in getServerSideProps:

res.setHeader("Cache-Control", "no-store");

and still the same issue, the url param in request method is still passed from the prev requested resources
I will try to deploy the app on Vercel but I do not think its a server (Forge) issue, because I made sure Forge not caching anything.

[yaman3bd]

@adrai. Hi again, I have disabled Nextjs cache completely and disabled the host servers from applying any cache and still the same issue, the issue seems to be with some static or global value in 18next while parsing the request method
however, I made a workaround for the issue it was working fine, when I pushed my changes to prod, in lazy loading mode I got too many errors: Rate Limit, Too Many Attempts, because the customized hook used everyone and sending requests to the API many times at once so the solution did not work.

---

I was doing some research and I found out locize has support for multi-tenant: https://docs.locize.com/more/multi-tenant
could you tell me please how did you implement multi-tenant support in locize?

[adrai]

A post processor will never load different namespaces etc....
I think we are back to the start again: The whole i18next setup is not made to magically and dynamically load tenant specific namespaces unless you define them directly when loading...
So basically you need to think of like having an individual Next.js app per tenant...
Also the multi-tenant approach of locize expects to have an individual locize project per tenant. And additionally offers the possibility to "override" translations for tenants, (default is the main/parent project translation). But on i18next side, you always have only tenant specific translations for a single specific tenant, no mix of namespaces, no mix of tenants etc...

[yaman3bd]

thanks a lot for clarifying how i18next and locize handle multi-tenant setups. and I agree with you we are back to the start and I have to think differently. I was wondering if you'd be open to helping us implement this directly in the project? We're totally on board with it being a paid consulting session. Alternatively, does locize offer something like this as a service? We're open to outsourcing this task to get it right. Looking forward to your thoughts and I hope you accept helping us!

[adrai]

No, unfortunately I can't help you with that. And locize does also not offer this type of services. Sorry.

[yaman3bd]

So basically you need to think of like having an individual Next.js app per tenant...
Also the multi-tenant approach of locize expects to have an individual locize project per tenant. And additionally offers the possibility to "override" translations for tenants, (default is the main/parent project translation).

ok, understand, so could you tell me more about what you mean by this?
and could you make a minimal example demonstrating the multi-tenancy support?

[adrai]

Like you need a separate Next.js App per each tenant... so a lot of individual next.js apps...