i18n : dealing with multiples locales and performance — at large scale

[violy]

I'm trying to solve a big challenge with Gatsby 4 : build fast & have fast sites on multiples countries — with multiples locales.

Context : here is my 10 sites countries and 7 languages :

• 🇫🇷 → fr
• 🇨🇭 → fr / de
• 🇧🇪 → fr / nl
• 🇱🇺 → fr
• 🇬🇧 → en
• 🇮🇹 → it
• 🇪🇸 → es
• 🇵🇹 → pt
• 🇦🇪 → en
• 🇸🇦 → en

And so :

• Each site is on a single domain.
• I plan to have a Gatbsy build for each country.
• all URLs is prefixed by locale.
• Some sites have 2 locales.
• I've code a gatsby local source plugin to get localized data from a localized API. It works fine.
• I create all pages with gatsby createPage() API in gatsby-node.js so every page/URI is dynamicaly generated. Localized data is query by page and it works fine.

To solve performance issues — ie. sharing components accross pages — I'm now trying to use useStaticQuery and StaticQuery — but, as you know, those API don't provide variable or context querying — and so, locale querying.

I've read many articles on Gatsby i18n techniques. Most of implementations and ressources — in first gatsby-plugin-i18n — have staticly file-system-with-locale-suffix source files. In my case, 7 locales means 7 files duplications to maintains, it's a painful choice…

Name your files with .langKey.js and the url will be /langKey/path/fileName (from gatsby-plugin-i18n docs)

One alternative I've in my plan : have a single build by country and by locale… multi-languages countries like Belgium or Switzerland would have 2 builds → see this article about multiples builds.

Also, I've seen this alternative using preval.macro — it is maybe too hacky ?

Any feedback is welcome.
Thanks, Arthur.