From 72bf48e10ff70ef63b698e0fb8b526eae06be7c5 Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Thu, 12 Sep 2024 21:21:00 -0400 Subject: [PATCH 1/5] fix dictionary api call during ssr --- .../templates/angular/src/app/app.module.ts | 3 ++- .../jss-translation-client-loader.service.ts | 19 +++++++++++++------ 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/create-sitecore-jss/src/templates/angular/src/app/app.module.ts b/packages/create-sitecore-jss/src/templates/angular/src/app/app.module.ts index ce37e7251d..9ca183bbf8 100644 --- a/packages/create-sitecore-jss/src/templates/angular/src/app/app.module.ts +++ b/packages/create-sitecore-jss/src/templates/angular/src/app/app.module.ts @@ -20,7 +20,8 @@ import { JssContextService } from './jss-context.service'; TranslateModule.forRoot({ loader: { provide: TranslateLoader, - useFactory: () => new JssTranslationClientLoaderService(new JssTranslationLoaderService()), + useFactory: (transferState: TransferState) => + new JssTranslationClientLoaderService(new JssTranslationLoaderService(), transferState), deps: [HttpClient, TransferState], }, }), diff --git a/packages/create-sitecore-jss/src/templates/angular/src/app/i18n/jss-translation-client-loader.service.ts b/packages/create-sitecore-jss/src/templates/angular/src/app/i18n/jss-translation-client-loader.service.ts index d76fdecc85..f8c992c657 100644 --- a/packages/create-sitecore-jss/src/templates/angular/src/app/i18n/jss-translation-client-loader.service.ts +++ b/packages/create-sitecore-jss/src/templates/angular/src/app/i18n/jss-translation-client-loader.service.ts @@ -1,16 +1,23 @@ -import { makeStateKey, Injectable } from '@angular/core'; +import { makeStateKey, Injectable, TransferState } from '@angular/core'; import { TranslateLoader } from '@ngx-translate/core'; -import { EMPTY } from 'rxjs'; +import { EMPTY, of } from 'rxjs'; -export const dictionaryStateKey = makeStateKey('jssDictionary'); +export const dictionaryStateKey = makeStateKey<{ [key: string]: string }>('jssDictionary'); @Injectable() export class JssTranslationClientLoaderService implements TranslateLoader { - constructor( - private fallbackLoader: TranslateLoader, - ) { } + constructor(private fallbackLoader: TranslateLoader, private transferState: TransferState) {} getTranslation(lang: string) { + const storedDictionary = this.transferState.get<{ [key: string]: string } | null>( + dictionaryStateKey, + null + ); + + if (storedDictionary !== null && Object.keys(storedDictionary).length > 0) { + return of(storedDictionary); + } + if (!this.fallbackLoader) { return EMPTY; } From 81f537e2b2e54176e3631e5f86032d7a42aa25fd Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Thu, 12 Sep 2024 21:31:53 -0400 Subject: [PATCH 2/5] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 40d78716cd..235bc27336 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ Our versioning strategy is as follows: * `[templates/nextjs]` `[templates/react]` `[templates/angular]` `[templates/vue]` Fixed an issue when environment variable is undefined (not present in .env), that produced an "undefined" value in generated config file ([#1875](https://github.com/Sitecore/jss/pull/1875)) * `[templates/nextjs]` Fix embedded personalization not rendering correctly after navigation through router links. ([#1911](https://github.com/Sitecore/jss/pull/1911)) +* `[template/angular]` Prevent client-side dictionary API call when SSR data is available ([#1930](https://github.com/Sitecore/jss/pull/1930)) ### 🎉 New Features & Improvements From b977b5247b81fe24aa47972c6a0ecf4359c9e952 Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Fri, 13 Sep 2024 09:59:06 -0400 Subject: [PATCH 3/5] update updgrade guide --- docs/upgrades/unreleased.md | 38 +++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/docs/upgrades/unreleased.md b/docs/upgrades/unreleased.md index bd2db98a91..b72ca5659a 100644 --- a/docs/upgrades/unreleased.md +++ b/docs/upgrades/unreleased.md @@ -47,6 +47,44 @@ } ``` +* Update jss-translation-client-loader service to get the performance improvement during fetching Dictionary Data Fetching for SSR + * In `/src/app/i18n/jss-translation-client-loader.service.ts` + * Add import for TranferState and of + ``` + import { TransferState } from '@angular/core'; + import { of } from 'rxjs'; + ``` + * Update `dictionaryStateKe`y` variable type + ``` + export const dictionaryStateKey = makeStateKey<{ [key: string]: string }>('jssDictionary'); + ``` + * Add `tranferState` variable to constructor + ``` + constructor(private fallbackLoader: TranslateLoader, private transferState: TransferState) {} + ``` + * Update the `getTranslation` method + ``` + getTranslation(lang: string) { + const storedDictionary = this.transferState.get<{ [key: string]: string } | null>( + dictionaryStateKey, + null + ); + + if (storedDictionary !== null && Object.keys(storedDictionary).length > 0) { + return of(storedDictionary); + } + + ... + } + ``` + * Update `/src/templates/angular/src/app/app.module.ts` + ``` + ... + useFactory: (transferState: TransferState) => + new JssTranslationClientLoaderService(new JssTranslationLoaderService(), transferState), + ... + ``` + # Angular - XMCloud If you plan to use the Angular SDK with XMCloud, you will need to perform next steps: From 1de8e92daac032653e7a62d46338409af2dab45e Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Fri, 13 Sep 2024 10:17:17 -0400 Subject: [PATCH 4/5] fix typo --- docs/upgrades/unreleased.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/upgrades/unreleased.md b/docs/upgrades/unreleased.md index b72ca5659a..24419203f6 100644 --- a/docs/upgrades/unreleased.md +++ b/docs/upgrades/unreleased.md @@ -54,7 +54,7 @@ import { TransferState } from '@angular/core'; import { of } from 'rxjs'; ``` - * Update `dictionaryStateKe`y` variable type + * Update `dictionaryStateKey` variable type ``` export const dictionaryStateKey = makeStateKey<{ [key: string]: string }>('jssDictionary'); ``` From 646172964f229fe8b78e0663db4937f751e34a70 Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Fri, 13 Sep 2024 11:59:48 -0400 Subject: [PATCH 5/5] refactor upgrade guide --- docs/upgrades/unreleased.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/upgrades/unreleased.md b/docs/upgrades/unreleased.md index 24419203f6..028340885e 100644 --- a/docs/upgrades/unreleased.md +++ b/docs/upgrades/unreleased.md @@ -47,7 +47,7 @@ } ``` -* Update jss-translation-client-loader service to get the performance improvement during fetching Dictionary Data Fetching for SSR +* Update jss-translation-client-loader service to get the performance improvement during fetching Dictionary Data for SSR * In `/src/app/i18n/jss-translation-client-loader.service.ts` * Add import for TranferState and of ``` @@ -58,7 +58,7 @@ ``` export const dictionaryStateKey = makeStateKey<{ [key: string]: string }>('jssDictionary'); ``` - * Add `tranferState` variable to constructor + * Add `transferState` variable to constructor ``` constructor(private fallbackLoader: TranslateLoader, private transferState: TransferState) {} ``` @@ -66,12 +66,12 @@ ``` getTranslation(lang: string) { const storedDictionary = this.transferState.get<{ [key: string]: string } | null>( - dictionaryStateKey, - null + dictionaryStateKey, + null ); if (storedDictionary !== null && Object.keys(storedDictionary).length > 0) { - return of(storedDictionary); + return of(storedDictionary); } ... @@ -79,7 +79,7 @@ ``` * Update `/src/templates/angular/src/app/app.module.ts` ``` - ... + ... useFactory: (transferState: TransferState) => new JssTranslationClientLoaderService(new JssTranslationLoaderService(), transferState), ...