Page occasionally does not load react-i18next translations

Question

We are using next-i18next to load translations in our NextJS page routed app. Pages load slowly and if a user clicks around quickly enough sometimes the page will load without translations, instead showing all the content as translation keys. An example page is below:

import { withPageAuthRequired } from "@auth0/nextjs-auth0";
import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";

const MyPage = ({ userProfile }) => {
  const { t } = useTranslation("mypage");
  return (
    <h1>
      <p>{t("page-title")}</p>
    </h1>
  );
};

export default MyPage;

export const getServerSideProps = withPageAuthRequired({
  async getServerSideProps(context: any) {
    const { locale } = context;

    const translations = await serverSideTranslations(locale, ["common", "mypage"]);
    return {
      props: {
        ...translations,
      },
    };
  },
});

Instead of the translated page title from the locale file it will show the literal string 'page-title' and all other localized strings on the page will also simply display the translation key.

We have noticed that when this issue occurs, there is a warning in the browser console: react-i18next:: You will need to pass in an i18next instance by using initReactI18next. We have tried changing our useTranslation hooks to not use suspense like so:

import { CircularProgress } from "@mui/material";
...

const { t, ready } = useTranslation("mypage", {useSuspense: false});

if (!ready) {
  return <CircularProgress />;
}

In this case, the issue still gets triggered, but now instead of showing the translation key, the CircularProgress component is rendered instead and does not go away.

Below is our next-i18next.config.js for reference.

/** @type {import('next-i18next').UserConfig} */
module.exports = {
  i18n: {
    locales: ['default', 'de', 'en',],
    // Use 'default' as a workaround: https://nextjs.org/docs/pages/building-your-application/routing/internationalization#prefixing-the-default-locale
    defaultLocale: 'default',
    // Disable because AWS Amplify does not support this: https://docs.aws.amazon.com/amplify/latest/userguide/ssr-Amplifysupport.html
    localeDetection: false,
  },
  localePath:
    typeof window === 'undefined'
      ? require('path').resolve('./public/locales')
      : '/public/locales',
}

We're not sure what might be causing the translations to not load correctly intermittently?