JSON translations don't work in SSR Spartacus 4.x

[fgrecchi-aswatson]

Hello,

I am opening a bug after creating a topic here.

I have implemented the Lazy Loading of the translations as in this guide. If I run the application in SSR mode it always falls back in CSR, even if I increase the timeout to over 1 minute.
If I remove the backend configuration and restore the static files, the SSR works fine.
This issue occurs on both version 4.1 and 4.2 of Spartacus.

Steps to reproduce:

ng new electronics-spa --style=scss --package-manager yarn
cd electronics-spa/
ng add @spartacus/schematics@latest --baseUrl https://spartacus-demo.eastus.cloudapp.azure.com:8443 --baseSite=electronics-spa --currency=USD --language=en --ssr --skip-confirmation
cp ./node_modules/@spartacus/assets/i18n-assets ./src/assets -r

(I am using of course mine SAP Cloud baseUrl)

Change the file src/app/spartacus/spartacus-configuration.module.ts in this way (as per the documentation):

providers: [
  provideConfig({
    i18n: {
      backend: {
        loadPath: 'assets/i18n-assets/{{lng}}/{{ns}}.json',
      },
      chunks: translationChunksConfig,
    },
  }),
];

Then finally run

yarn build:ssr
yarn serve:ssr

And when you open the application in the browser it will fall back in the CSR mode without any error on server side.
If you revert the spartacus-configuration.module.ts and re-build and re-run the application, SSR works fine.

I have created a simple repo that reproduces the error: https://github.com/fgrecchi-aswatson/spartacus-ssr-issue

Thanks
Filippo Grecchi

[Xymmer]

seeking feedback from dev time, will come back soon

[Platonn]

No simple answer for this ticket from top of my head. I’ll need to dive and debug.
Many thanks @fgrecchi-aswatson for providing a REPO for reproducing!

[fgrecchi-aswatson]

Hello,

a coworker of mine find out this possible solution related to i18next configuration

In projects/core/src/i18n/i18next/i18next-init.ts we added reloadInterval: 0 to the configuration object passed to i18next.init().

So here's the code:

...
          if (config.i18n.backend) {
            i18next.use(i18nextHttpBackend);
            const loadPath = getLoadPath(
              config.i18n.backend.loadPath,
              serverRequestOrigin
            );
            const backend = {
              loadPath,
              ajax: i18nextGetHttpClient(httpClient),
              reloadInterval: 0,
            };
            i18nextConfig = { ...i18nextConfig, backend };
          }
...

I hope this might help.
Filippo

[Platonn]

I confirm it's a bug. The JSON translations work in CSR, but don't work OOTB in SSR:

• for schematics-installed Spartacus 4.2.0
• for schematics-installed Spartacus 3.4.5
• for develop 4.2 (our repo)

To reproduce in our repo:
yarn build:assets
cp -r dist/assets/i18n-assets projects/storefrontapp/src/assets

config:

i18n: {
-    resources: translations,
+    backend: {
+          loadPath: 'assets/i18n-assets/{{lng}}/{{ns}}.json',
+    },
}

[Platonn]

Hi @fgrecchi-aswatson. I confirm, the fix is to set reloadInterval: false in the backend options of i18next
Unfortunately until #11675 is implemented, it's cumbersome for customers to apply quick fix themselves. Currently, to change any logic in the function 18nextInit() customers need to dismantle deeply the modules tree up to the I18nModule and then provide a custom factory function i18nextInit()

Detailed results of investigation:
In 4.0, when switching from the deprecated 3rd party dependency i18next-xhr-backend to its new counterpart i18next-http-backend we didn't notice that there are slight differences between those packages:

• the new package has a bit different API for passing the custom http client - which was already addressed in develop branch by this PR https://github.com/SAP/spartacus/pull/14453/files#diff-b9c2f7d32db998292ce5b32da446437ad64755d84817c3261fdbc89f6438856aL99-R113
• the new package invokes the function setInterval() which makes the SSR render to hang. This issue will be addressed by the PR to develop fix: i18n when using JSON in SSR - set reloadInterval: false #15297

Since develop branch now is aimed to be released only as 5.0, we should backport both PRs #14453 and #15297 to release/4.3.x and then release a new 4.3.x patch.

This is a priority task now.

[Platonn]

For reference:
The fixes have been already released in v4.3.1. For more, see the commits history of release/4.3.x. branch.