diff --git a/src/cdk-experimental/deferred-content/deferred-content.spec.ts b/src/cdk-experimental/deferred-content/deferred-content.spec.ts
index 75262e77ae34..7ec79e023963 100644
--- a/src/cdk-experimental/deferred-content/deferred-content.spec.ts
+++ b/src/cdk-experimental/deferred-content/deferred-content.spec.ts
@@ -32,10 +32,10 @@ describe('DeferredContent', () => {
       component.preserveContent.set(true);
     });
 
-    it('creates the content when hidden.', async () => {
+    it('does not create the content until first visible.', async () => {
       collapsible.injector.get(Collapsible).contentVisible.set(false);
       await fixture.whenStable();
-      expect(collapsible.nativeElement.innerText).toBe('Lazy Content');
+      expect(collapsible.nativeElement.innerText).toBe('');
     });
 
     it('creates the content when visible.', async () => {
@@ -43,6 +43,14 @@ describe('DeferredContent', () => {
       await fixture.whenStable();
       expect(collapsible.nativeElement.innerText).toBe('Lazy Content');
     });
+
+    it('does not remove the content when hidden.', async () => {
+      collapsible.injector.get(Collapsible).contentVisible.set(true);
+      await fixture.whenStable();
+      collapsible.injector.get(Collapsible).contentVisible.set(false);
+      await fixture.whenStable();
+      expect(collapsible.nativeElement.innerText).toBe('Lazy Content');
+    });
   });
 });
 
diff --git a/src/cdk-experimental/deferred-content/deferred-content.ts b/src/cdk-experimental/deferred-content/deferred-content.ts
index 3261e84145eb..f98ef1cc9634 100644
--- a/src/cdk-experimental/deferred-content/deferred-content.ts
+++ b/src/cdk-experimental/deferred-content/deferred-content.ts
@@ -7,8 +7,8 @@
  */
 
 import {
+  afterRenderEffect,
   Directive,
-  effect,
   inject,
   input,
   TemplateRef,
@@ -21,7 +21,7 @@ import {
  */
 @Directive()
 export class DeferredContentAware {
-  contentVisible = signal(false);
+  readonly contentVisible = signal(false);
   readonly preserveContent = input(false);
 }
 
@@ -48,16 +48,13 @@ export class DeferredContent {
   private _isRendered = false;
 
   constructor() {
-    effect(() => {
-      if (
-        this._deferredContentAware.preserveContent() ||
-        this._deferredContentAware.contentVisible()
-      ) {
+    afterRenderEffect(() => {
+      if (this._deferredContentAware.contentVisible()) {
         if (this._isRendered) return;
         this._viewContainerRef.clear();
         this._viewContainerRef.createEmbeddedView(this._templateRef);
         this._isRendered = true;
-      } else {
+      } else if (!this._deferredContentAware.preserveContent()) {
         this._viewContainerRef.clear();
         this._isRendered = false;
       }