refactor(core): do not serialize parent block id for top level blocks

This commit updates incremental hydration-related annotation logic to avoid serializing parent block id when it's `null` (for top-level blocks).
AndrewKushnir · Dec 17, 2024 · e2fa067 · e2fa067
1 parent add84dd
commit e2fa067
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 8 deletions.
diff --git a/packages/core/src/hydration/annotate.ts b/packages/core/src/hydration/annotate.ts
@@ -405,7 +405,6 @@ function serializeLContainer(
 
           // Add defer block into info context.deferBlocks
           const deferBlockInfo: SerializedDeferBlock = {
-            [DEFER_PARENT_BLOCK_ID]: parentDeferBlockId,
             [NUM_ROOT_NODES]: rootNodes.length,
             [DEFER_BLOCK_STATE]: lDetails[CURRENT_DEFER_BLOCK_STATE],
           };
@@ -415,6 +414,11 @@ function serializeLContainer(
             deferBlockInfo[DEFER_HYDRATE_TRIGGERS] = serializedTriggers;
           }
 
+          if (parentDeferBlockId !== null) {
+            // Serialize parent id only when it's present.
+            deferBlockInfo[DEFER_PARENT_BLOCK_ID] = parentDeferBlockId;
+          }
+
           context.deferBlocks.set(deferBlockId, deferBlockInfo);
 
           const node = unwrapRNode(lContainer);

diff --git a/packages/core/src/hydration/interfaces.ts b/packages/core/src/hydration/interfaces.ts
@@ -158,7 +158,7 @@ export interface SerializedDeferBlock {
   /**
    * This contains the unique id of this defer block's parent, if it exists.
    */
-  [DEFER_PARENT_BLOCK_ID]: string | null;
+  [DEFER_PARENT_BLOCK_ID]?: string;
 
   /**
    * This field represents a status, based on the `DeferBlockState` enum.

diff --git a/packages/core/src/hydration/utils.ts b/packages/core/src/hydration/utils.ts
@@ -571,7 +571,7 @@ export function getParentBlockHydrationQueue(
   const deferBlockParents = transferState.get(NGH_DEFER_BLOCKS_KEY, {});
 
   let isTopMostDeferBlock = false;
-  let currentBlockId: string | null = deferBlockId;
+  let currentBlockId: string | undefined = deferBlockId;
   let parentBlockPromise: Promise<void> | null = null;
   const hydrationQueue: string[] = [];
 

diff --git a/packages/platform-server/test/incremental_hydration_spec.ts b/packages/platform-server/test/incremental_hydration_spec.ts
@@ -222,7 +222,7 @@ describe('platform-server partial hydration integration', () => {
         const ssrContents = getAppContents(html);
 
         expect(ssrContents).toContain(
-          '"__nghDeferData__":{"d0":{"p":null,"r":1,"s":2},"d1":{"p":"d0","r":2,"s":2}}',
+          '"__nghDeferData__":{"d0":{"r":1,"s":2},"d1":{"r":2,"s":2,"p":"d0"}}',
         );
       });
 
@@ -285,7 +285,7 @@ describe('platform-server partial hydration integration', () => {
         const ssrContents = getAppContents(html);
 
         expect(ssrContents).toContain(
-          '"__nghDeferData__":{"d0":{"p":null,"r":1,"s":2},"d1":{"p":"d0","r":2,"s":2,"t":[2]}}',
+          '"__nghDeferData__":{"d0":{"r":1,"s":2},"d1":{"r":2,"s":2,"t":[2],"p":"d0"}}',
         );
       });
     });
@@ -347,7 +347,7 @@ describe('platform-server partial hydration integration', () => {
         expect(ssrContents).toContain('<p jsaction="click:;keydown:;" ngb="d1');
         // There is an extra annotation in the TransferState data.
         expect(ssrContents).toContain(
-          '"__nghDeferData__":{"d0":{"p":null,"r":1,"s":2},"d1":{"p":"d0","r":1,"s":2}}',
+          '"__nghDeferData__":{"d0":{"r":1,"s":2},"d1":{"r":1,"s":2,"p":"d0"}}',
         );
         // Outer defer block is rendered.
         expect(ssrContents).toContain('Main defer block rendered');
@@ -460,7 +460,7 @@ describe('platform-server partial hydration integration', () => {
         expect(ssrContents).toContain('<p jsaction="click:;keydown:;" ngb="d1');
         // There is an extra annotation in the TransferState data.
         expect(ssrContents).toContain(
-          '"__nghDeferData__":{"d0":{"p":null,"r":1,"s":2},"d1":{"p":"d0","r":1,"s":2}}',
+          '"__nghDeferData__":{"d0":{"r":1,"s":2},"d1":{"r":1,"s":2,"p":"d0"}}',
         );
         // Outer defer block is rendered.
         expect(ssrContents).toContain('Main defer block rendered');
@@ -569,7 +569,7 @@ describe('platform-server partial hydration integration', () => {
         // <p> is inside a nested defer block -> different namespace.
         // expect(ssrContents).toContain('<p jsaction="click:;" ngb="d1');
         // There is an extra annotation in the TransferState data.
-        expect(ssrContents).toContain('"__nghDeferData__":{"d0":{"p":null,"r":1,"s":2}}');
+        expect(ssrContents).toContain('"__nghDeferData__":{"d0":{"r":1,"s":2}}');
         // Outer defer block is rendered.
         expect(ssrContents).toContain('Main defer block rendered');
         // Inner defer block should only display placeholder.