[template/angular] Prevent client-side dictionary API call when SSR d…

…ata is available (#1930) * fix dictionary api call during ssr * update changelog * update updgrade guide * fix typo * refactor upgrade guide --------- Co-authored-by: Addy Pathania <[email protected]>
Sitecore · Sep 13, 2024 · d93e3b5 · d93e3b5
1 parent 3fab1ea
commit d93e3b5
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 7 deletions.
diff --git 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
 

diff --git 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 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 `dictionaryStateKey` variable type
+            ```
+                export const dictionaryStateKey = makeStateKey<{ [key: string]: string }>('jssDictionary');
+            ```
+        * Add `transferState` 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:

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
@@ -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/...-sitecore-jss/src/templates/angular/src/app/i18n/jss-translation-client-loader.service.ts b/...-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;
     }