Translations failing when page is idle for couple of hours

[PreethiVS21]

🐛 Bug Report

in next-i18next version 13.2.2, When translations are rendered using getServerSideProps (next 13.5-pages router) , translations doesn't happen after couple of hours. I can only see key names .

To Reproduce

next-i18next.config.js

const path = require('path');
module.exports = {
  debug: false,
  i18n: {
    defaultLocale: "en",
    locales: ["en", "es"],
  },
  localePath:
    typeof window === 'undefined'
      ? path.resolve('./public/locales')
      : '/locales'
};

index.tsx

export const getServerSideProps: GetServerSideProps<Props> = async ({
  locale,
})=>{

  return {
    props: {
      ...(await serverSideTranslations(locale ?? 'en', [
        'common',
        'randomns'
      ]))
    }
  };
}

Expected behavior

Translations shouldn't fail intermittently

Your Environment

"i18next": "^22.4.13",
"next": "^13.5.6",(pages router)
"next-i18next": "^13.2.2",

[adrai]

Hearing this for the first time...
Maybe a problem of your deployment environment?
Or is this reproducible also locally?
Please provide more information.

[PreethiVS21]

Yes, I can reproduce it locally. Similar comment was addressed here. Can you confirm if this is needed whenever we need to get translations from getServerSideProps
vercel/next.js#46730 (comment)

[adrai]

seems the way Next.js handles this... yes

[Sarawut-keng]

@PreethiVS21 Have you figured out how to fix it? I have also encountered this issue.
I have utilized Page Router, and below are the versions of the packages I am currently using:

"i18next": "^23.8.2",
"next-i18next": "^15.2.0",
"next": "^13.5.6"

[jgregory-apogee]

I've found I can reproduce this locally fairly easily. In our case, we are using a custom Docker image. Simply rebuilding the image and redeploying it is enough to break the translations.

Steps:

1. Deploy the app in prod mode and open any page.
2. Rebuild / redeploy the image.
3. Soft-navigate from the already-opened page to another page. Translations will be broken.

I can see that Next is fetching a translations file on every page transition. For instance, every time I navigate to Page A, it will fetch /_next/data/tfbRnBfT3Y6OXf7Afbrm1/en/PageA/6632778e658b8005459f8503.json, and every time I go to Page B, it will fetch /_next/data/tfbRnBfT3Y6OXf7Afbrm1/en/PageB/99125246-21fc-4742-876c-e7d3b9a52bcc.json. But after a redeploy, those two URLs return an empty translation list: {}. Presumably this is because the Next BUILD_ID has changed. If I do a full reload, the pages fetch slightly different URLs, like: /_next/data/eCtPEywIx-3IoSgG-JHVF/en/PageA/6632778e658b8005459f8503.json. (Note that the old BUILD_ID tfbRnBfT3Y6OXf7Afbrm1 has been replaced with eCtPEywIx-3IoSgG-JHVF).

Anyways, it seems I need a way to detect that there's a new BUILD_ID in play and force next to do a full-page-load transition.

[BrilliantDecision]

@PreethiVS21 @Sarawut-keng any updates guys? same issue on the same next version 13.5.6 (pages router) @adrai @jgregory-apogee

[BrilliantDecision]

@adrai getServerSideProps totally doesnt work after couple of hours, its ok with getStaticProps

[adrai]

@adrai getServerSideProps totally doesnt work after couple of hours, its ok with getStaticProps

If that's the case you may ask the Next.js team...

[Sarawut-keng]

@BrilliantDecision after reviewing the case, I have figured out that @jgregory-apogee ’s comment was correct. After my CD re-deployment, the language broke. I am not sure if this occurs only on the page router. Right now, we do not have the best solution yet. We have just briefed users that we have updated to a new version and that they need to refresh the screen.

[BrilliantDecision]

@Sarawut-keng and how do you implement this notification, what do you use for this? how do you understand that you need to refresh the page? some error catcher?

[mehmetyilmaz001]

In my case; we are writing the files by reading from api with json streaming to file system. During writing process, if the file is not fully ready, the i18n instance were reading the broken JSON format. We ensured the write process finish before i18n read the file.