Translations aren't loaded while isFallback = true

Hey!

I noticed an issue that translations aren’t loaded while in the isFallback state.

This is my getStaticPaths for one of the pages:

export const getStaticPaths: GetStaticPaths = async ({ locales }) => {
  const cities = await Api.getCities()
  let paths: Path[] = []

  locales?.forEach((locale) => {
    const localePaths = cities.map((city) => ({
      params: {
        citySlug: city.slug,
      },
      locale,
    }))
    paths = paths.concat(localePaths)
  })

  return {
    paths,
    fallback: true,
  }

getStaticProps:

export const getStaticProps: GetStaticProps<Props, Params> = async ({
  params,
}) => {
  let notFound = false

  if (!params || !params.citySlug) {
    notFound = true
    return {
      notFound,
    }
  }

  const home = await Api.getHome(params.citySlug)
  const city = await Api.getSingleCity(params.citySlug)

  if (!home || !city) {
    notFound = true
  }

  return {
    props: {
      home,
      city,
    },
    notFound,
    revalidate: 60,
  }
}

So when the new props are being fetched (isFallback is true), the translations aren’t loaded. Once isFallback is false, then you can see all the translations.

For now, I’m just setting if (isFallback) return null - so that the screen is white while in fallback, but this is not that user friendly 😦

Do you guys have any ideas on how to fix that?

[berndartmueller]

Digging through the commits since 1.0.5, I was able to pin-point the issue down to https://github.com/vinissimus/next-translate/blob/8abc45855cdc95bed873657379499c758483829a/src/useTranslation.tsx#L11

useMemo() has the wrong dependencies. ctx.t should be listed in the deps instead of ctx.lang.

@aralroca Can you change it and release a hotfix patch version or should I create a PR?

[richardhsueh]

But for my page, the required translation is just under common namespace , and i did added '*': ['common'] in 18n.js . Also the translation only missing when go to page directly (paste the link to browser and press enter), if I navigate inside the website and land into the not found page, the translation will display correctly .