Microcopy from Assets API

[Gnito]

How this works:

Production mode (yarn start and yarn run dev-server):

1. Export fetchAppAssets from src/index.js to make it available for the server.
2. SSR: initialize the store
3. SSR: fetchAppAssets thunk fetches the 'latest' alias of 'content/translations.json' asset with sdk.assetByAlias
4. SSR: make a loadData call if the route specifies it and
5. SSR: asset version is saved to the store and passed to the browser through the "preloadedState".
6. SSR: render the <ServerApp> and pass translations as props.
7. Browser: initialize the store with a preloaded state
8. Browser: fetchAppAssets thunk fetch assets using asset version: calls sdk.assetByVersion.
9. Browser: make loadData call
10. Browser: hydrate the <ClientApp> and pass translations as props.

Side note:

• 'latest' alias has currently a cache on CDN
  • 5 min in the production environment (subject to change)
  • 5 sec in the test environment (subject to change)
  • Read more from Flex Docs > References > Asset Delivery API
• Step 8 leverages browser cache: most of the page loads hit local cached.
  • Versioned asset files can be cached for a long time.
• Step 9 could be optimized (it's there for consistency in CSR data loading).

Development mode (yarn run dev):

1. Browser: initialize the store
2. Browser: fetchAppAssets thunk fetches assets using 'latest' alias: calls sdk.assetByAlias
3. Browser: make loadData call
4. Browser: render the <ClientApp> and pass translations as props.

---

Other:

• CSP: Asset Delivery API uses a new domain.

• assetCdnBaseUrl is mainly used for our internal dev environment.

  • It can be used to proxy calls through your own custom server if you need proxying.

• app.js: some refactoring to improve readability

• SectionHero: SSR delays animation 3s, CSR swaps it to happen immediately

  • If the asset file is not in the browser's cache or the connection is slow, server-side rendered CSS might start the animation. Then client-side rendering might cause it to happen again. This change pushes the SSR animation to have a longer delay.

• Update translation files (de.json, es.json, fr.json) to include all the keys defined in en.json
  (and use English translation as value for those untranslated keys)

  • For FTW-daily: only de.json was missing keys and has English translations included as a fallback.