initialI18nStore is empty when i18next-http-backend is used

Question

I am using next-i18next with i18next-chained-backend for i18next-fs-backend & i18next-http-backend in a Next.js app, where i18next-fs-backend is used as server-side cache.

It seems like there is an issue with the updation of cache, from my understanding when the expirationTime exceeds i18next-http-backend fetches the latest locales from the API and i18next-fs-backend removes the locales present in loadPath and adds the fetched locales in addPath essentially replacing the locales present in the filesystem with the latest one.

The plugin is able to remove the locales from loadPath but after fetching the latest locales from API, it does not add it to addPath.

I am also using the custom request option as seen here in my next-i18next.config.js:

const axios = require('axios');
const ChainedBackend = require('i18next-chained-backend');

/**
 * @type {import('next-i18next').UserConfig}
 */
module.exports = {
  // debug: process.env.NODE_ENV === 'development',
  // reloadOnPrerender: process.env.NODE_ENV === 'development',
  debug: true,
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'zh'],
  },
  lng: 'en',
  fallbackLng: 'en',
  preload: ['en', 'es', 'zh'],
  ns: ['common'],
  defaultNS: 'common',
  backend: {
    backends:
      typeof window === 'undefined'
        ? [
            require('i18next-fs-backend/cjs'),
            require('i18next-http-backend/cjs'),
          ]
        : [],
    backendOptions:
      typeof window === 'undefined'
        ? [
            {
              loadPath: './public/locales_cache/{{lng}}/{{ns}}.json',
              addPath: './public/locales_cache/{{lng}}/{{ns}}.json',
              // expirationTime: 60 * 1000 * 60, // 1 hour
              expirationTime: 60 * 1000 * 2, // 2 min
            },
            {
              loadPath: '/locales/{{lng}}/{{ns}}.json',
              request: async (_options, url, _payload, callback) => {
                try {
                  const [locale] = url.split('/');
                  const result = await axios(
                    `${process.env.NEXT_PUBLIC_API_URL}/contents/webapp_content/`
                  );
                  const content = result.data[locale] || {};

                  callback(null, { status: 200, data: content });
                } catch (error) {
                  callback(error, null);
                }
              },
            },
          ]
        : [],
  },
  use: typeof window === 'undefined' ? [ChainedBackend] : [],
  react: {
    useSuspense: false,
  },
  returnNull: false,
  serializeConfig: false,
};

The config is also passed to pages that use SSR and SSG like so:

// src/pages/index.tsx

import React from 'react';

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

import { Landing } from '@/containers/Landing/Landing';
import { Layout } from '@/layout/Layout';

import nextI18nConfig from '../../next-i18next.config.js';

export default function LandingPage() {
  return (
    <Layout>
      <Landing />
    </Layout>
  );
}

export const getServerSideProps: GetServerSideProps = async ({
  locale = 'en',
}) => {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common'], nextI18nConfig)),
    },
  };
};

Environment

• runtime version: node v18.16.0
• os: Linux
• i18next: ^22.5.1
• i18next-chained-backend: ^4.3.0
• i18next-fs-backend: ^2.1.3
• i18next-http-backend: ^2.2.1
• react-i18next: ^12.3.1

It should update the cache after fetching the latest locales