diff --git a/src/components/micro-frame-slot/component/node.marko b/src/components/micro-frame-slot/component/node.marko
index b32713a..eb11a61 100644
--- a/src/components/micro-frame-slot/component/node.marko
+++ b/src/components/micro-frame-slot/component/node.marko
@@ -1,51 +1,39 @@
-import StreamSource from "../../stream-source/component/StreamSource";
-$ const sourceName = input.from;
-$ let err;
+import { getOrCreateStreamSource } from "../../stream-source/component/helper";
+
 $ {
-  if (!out.global.STREAM_SOURCE_MAP_SERVER || !out.global.STREAM_SOURCE_MAP_SERVER.has(sourceName))
-    err = new Error(`micro-frame-sse ${sourceName} is not defined.`);
+  const streamSource = getOrCreateStreamSource(input.from, out);
+  const stream = streamSource.slot(input.slot);
+  let finishLoading;
+  const loadingPromise =
+    input.loading && new Promise((res) => (finishLoading = res));
 }
-
-<if(err)>
-  $ if (!input.catch) throw err;
-  <${input.catch}(err)/>
-</if>
-<else>
-  $ const streamSource = out.global.STREAM_SOURCE_MAP_SERVER.get(sourceName);
-  $ const stream = streamSource.slot(input.slot);
-  $ let finishLoading;
-  $ {
-    const loadingPromise =
-      input.loading && new Promise((res) => (finishLoading = res));
-  }
-  <div id=component.id data-slot=input.slot data-from=input.from>
-    <macro name="wait">
-      <await(stream.next())
-        client-reorder=input.clientReorder
-        timeout=input.timeout
-      >
-        <@then|{ value, done }|>
-          <if(!done)>
-            $!{value}
-            <wait/>
-          </if>
-          <else>
-            $ finishLoading && finishLoading();
-          </else>
-        </@then>
-        <@catch|e|>
+<div id=component.id data-slot=input.slot data-from=input.from>
+  <macro name="wait">
+    <await(stream.next())
+      client-reorder=input.clientReorder
+      timeout=input.timeout
+    >
+      <@then|{ value, done }|>
+        <if(!done)>
+          $!{value}
+          <wait/>
+        </if>
+        <else>
           $ finishLoading && finishLoading();
-          <${input.catch}(e)/>
-        </@catch>
-      </await>
-    </macro>
-    $ out.bf("@_", component, true);
-    <if(stream)>
-      <if(input.loading)>
-        <await(loadingPromise) placeholder=input.loading client-reorder/>
-      </if>
-      <wait/>
+        </else>
+      </@then>
+      <@catch|e|>
+        $ finishLoading && finishLoading();
+        <${input.catch}(e)/>
+      </@catch>
+    </await>
+  </macro>
+  $ out.bf("@_", component, true);
+  <if(stream)>
+    <if(input.loading)>
+      <await(loadingPromise) placeholder=input.loading client-reorder/>
     </if>
-    $ out.ef();
-  </div>
-</else>
+    <wait/>
+  </if>
+  $ out.ef();
+</div>
diff --git a/src/components/micro-frame-slot/component/web.component.ts b/src/components/micro-frame-slot/component/web.component.ts
index d4e5c9a..f6fb144 100644
--- a/src/components/micro-frame-slot/component/web.component.ts
+++ b/src/components/micro-frame-slot/component/web.component.ts
@@ -1,6 +1,7 @@
 import { StreamWritable } from "../../stream-source/component/StreamWritable";
-import { STREAM_SOURCE_MAP_CLIENT } from "../../stream-source/component/StreamSource";
+import StreamSource from "../../stream-source/component/StreamSource";
 import getWritableDOM from "writable-dom";
+import { getOrCreateStreamSource } from "../../stream-source/component/helper";
 
 interface Input {
   slot: string;
@@ -36,34 +37,38 @@ export = {
     };
   },
   onMount() {
-    // Only trigger a new load if this wasn't ssr'd, or the src has changed.
+    this.streamSource = getOrCreateStreamSource(this.input.from);
+    this.handleSrcChange = this.handleSrcChange.bind(this);
+    this.streamSource.onInvalidate(this.handleSrcChange);
     this.onUpdate();
   },
+  handleSrcChange(src: string) {
+    this.curSrc = src;
+    this.forceUpdate();
+  },
   onDestroy() {
     this.slot?.end();
+    this.streamSource.offInvalidate(this.handleSrcChange);
   },
   async onUpdate() {
-    if (this.slotId === this.input.slot && this.from === this.input.from)
+    if (
+      this.slotId === this.input.slot &&
+      this.from === this.input.from &&
+      this.prevSrc === this.curSrc
+    )
       return;
 
     this.state.loading = true;
     this.state.err = undefined;
     this.slotId = this.input.slot;
     this.from = this.input.from;
+    this.prevSrc = this.curSrc;
 
     let writable: ReturnType<typeof getWritableDOM> | undefined;
     let err: Error | undefined;
 
     try {
-      const streamSource = STREAM_SOURCE_MAP_CLIENT.get(this.from);
-      // In case of micro-frame-sse pure server-side rendered,
-      // throw error when the slot trying to connect to the stream
-      if (!streamSource)
-        throw new Error(
-          `micro-frame-sse ${this.from} is not defined or server-side rendered.`
-        );
-
-      this.slot = streamSource.slot(this.slotId);
+      this.slot = this.streamSource.slot(this.slotId);
 
       if (!this.slot) {
         return;
@@ -98,9 +103,14 @@ export = {
   el: HTMLDivElement;
   slotId: string | undefined;
   from: string | undefined;
+  prevSrc: string | undefined;
+  curSrc: string | undefined;
   slot: StreamWritable | undefined;
+  streamSource: StreamSource;
   onUpdate(): unknown;
   onCreate(): unknown;
   onMount(): unknown;
   onDestroy(): unknown;
+  forceUpdate(): unknown;
+  handleSrcChange(src: string): unknown;
 };
diff --git a/src/components/micro-frame-slot/component/web.marko b/src/components/micro-frame-slot/component/web.marko
index fe0aab2..2a0c1cb 100644
--- a/src/components/micro-frame-slot/component/web.marko
+++ b/src/components/micro-frame-slot/component/web.marko
@@ -12,5 +12,5 @@ static function noop() {}
   We put the streamed html in a preserved fragment.
   This allows Marko to avoid diffing that section.
   -->
-  $ out.bf("@_", component, !state.err && component.slotId === input.slot && component.from === input.from).ef();
+  $ out.bf("@_", component, !state.err && component.slotId === input.slot && component.from === input.from && component.prevSrc === component.curSrc).ef();
 </div>
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-invalid-sourcename/renders.expected/loading.0.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-invalid-sourcename/renders.expected/loading.0.html
deleted file mode 100644
index a760d8e..0000000
--- a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-invalid-sourcename/renders.expected/loading.0.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<div>
-  Host app
-</div>
-<script>
-  $csr_invalid_sourcename_index_C=(window.$csr_invalid_sourcename_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["OiIjaj99"]})
-</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-invalid-sourcename/renders.expected/loading.1.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-invalid-sourcename/renders.expected/loading.1.html
deleted file mode 100644
index d4da446..0000000
--- a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-invalid-sourcename/renders.expected/loading.1.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<div>
-  Host app
-</div>
-<div />
-<div>
-  Slot_1 Error: micro-frame-sse test_error is not defined or server-side rendered.
-</div>
-<div />
-<script>
-  $csr_invalid_sourcename_index_C=(window.$csr_invalid_sourcename_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["OiIjaj99"]})
-</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-invalid-sourcename/renders.expected/loading.2.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-invalid-sourcename/renders.expected/loading.2.html
deleted file mode 100644
index 9aa28c6..0000000
--- a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-invalid-sourcename/renders.expected/loading.2.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<div>
-  Host app
-</div>
-<div />
-<div>
-  Slot_1 Error: micro-frame-sse test_error is not defined or server-side rendered.
-</div>
-<div>
-  <p>
-    test_html for slot_2
-  </p>
-</div>
-<script>
-  $csr_invalid_sourcename_index_C=(window.$csr_invalid_sourcename_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["OiIjaj99"]})
-</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/loading.0.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/loading.0.html
new file mode 100644
index 0000000..0fa1059
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/loading.0.html
@@ -0,0 +1,9 @@
+<div>
+  Host app
+</div>
+<button>
+  Change
+</button>
+<script>
+  $csr_then_change_src_index_C=(window.$csr_then_change_src_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["hjKmUtFR"]})
+</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/loading.1.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/loading.1.html
new file mode 100644
index 0000000..b3a2eb1
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/loading.1.html
@@ -0,0 +1,12 @@
+<div>
+  Host app
+</div>
+<button>
+  Change
+</button>
+<div />
+<div />
+<div />
+<script>
+  $csr_then_change_src_index_C=(window.$csr_then_change_src_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["hjKmUtFR"]})
+</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/loading.2.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/loading.2.html
new file mode 100644
index 0000000..5cdcd83
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/loading.2.html
@@ -0,0 +1,16 @@
+<div>
+  Host app
+</div>
+<button>
+  Change
+</button>
+<div />
+<div>
+  <p>
+    test_html for slot_1
+  </p>
+</div>
+<div />
+<script>
+  $csr_then_change_src_index_C=(window.$csr_then_change_src_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["hjKmUtFR"]})
+</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/loading.3.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/loading.3.html
new file mode 100644
index 0000000..d1886fa
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/loading.3.html
@@ -0,0 +1,20 @@
+<div>
+  Host app
+</div>
+<button>
+  Change
+</button>
+<div />
+<div>
+  <p>
+    test_html for slot_1
+  </p>
+</div>
+<div>
+  <p>
+    test_html for slot_2
+  </p>
+</div>
+<script>
+  $csr_then_change_src_index_C=(window.$csr_then_change_src_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["hjKmUtFR"]})
+</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/loading.4.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/loading.4.html
new file mode 100644
index 0000000..cf6eac2
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/loading.4.html
@@ -0,0 +1,21 @@
+<div>
+  Host app
+</div>
+<button>
+  Change
+</button>
+<div />
+<div>
+  <p>
+    test_html for slot_1
+  </p>
+  next chunk for slot_1
+</div>
+<div>
+  <p>
+    test_html for slot_2
+  </p>
+</div>
+<script>
+  $csr_then_change_src_index_C=(window.$csr_then_change_src_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["hjKmUtFR"]})
+</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/step-0.0.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/step-0.0.html
new file mode 100644
index 0000000..b3a2eb1
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/step-0.0.html
@@ -0,0 +1,12 @@
+<div>
+  Host app
+</div>
+<button>
+  Change
+</button>
+<div />
+<div />
+<div />
+<script>
+  $csr_then_change_src_index_C=(window.$csr_then_change_src_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["hjKmUtFR"]})
+</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/step-0.1.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/step-0.1.html
new file mode 100644
index 0000000..5cdcd83
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/step-0.1.html
@@ -0,0 +1,16 @@
+<div>
+  Host app
+</div>
+<button>
+  Change
+</button>
+<div />
+<div>
+  <p>
+    test_html for slot_1
+  </p>
+</div>
+<div />
+<script>
+  $csr_then_change_src_index_C=(window.$csr_then_change_src_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["hjKmUtFR"]})
+</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/step-0.2.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/step-0.2.html
new file mode 100644
index 0000000..d1886fa
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/step-0.2.html
@@ -0,0 +1,20 @@
+<div>
+  Host app
+</div>
+<button>
+  Change
+</button>
+<div />
+<div>
+  <p>
+    test_html for slot_1
+  </p>
+</div>
+<div>
+  <p>
+    test_html for slot_2
+  </p>
+</div>
+<script>
+  $csr_then_change_src_index_C=(window.$csr_then_change_src_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["hjKmUtFR"]})
+</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/step-0.3.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/step-0.3.html
new file mode 100644
index 0000000..9487d38
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/csr-then-change-src/renders.expected/step-0.3.html
@@ -0,0 +1,21 @@
+<div>
+  Host app
+</div>
+<button>
+  Change
+</button>
+<div />
+<div>
+  <p>
+    test_html for slot_1
+  </p>
+  after src change
+</div>
+<div>
+  <p>
+    test_html for slot_2
+  </p>
+</div>
+<script>
+  $csr_then_change_src_index_C=(window.$csr_then_change_src_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["hjKmUtFR"]})
+</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-only/renders.expected/loading.2.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-only/renders.expected/loading.2.html
index c00b3f5..b4ebcac 100644
--- a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-only/renders.expected/loading.2.html
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-only/renders.expected/loading.2.html
@@ -29,19 +29,17 @@
   </p>
 </div>
 <div
-  data-src="embed"
   id="GENERATED-4"
+  style="display:none"
 >
   <noscript
     id="GENERATED-5"
   />
 </div>
 <div
-  data-from="test2"
-  data-slot="slot_1"
   id="GENERATED-6"
->
-  <p>
-    test_2_html for slot_1
-  </p>
-</div>
\ No newline at end of file
+  style="display:none"
+/>
+<script>
+  function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b&lt;f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b&lt;f;b++)c(a[b])}};$af(0);$af(1)
+</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-only/renders.expected/loading.3.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-only/renders.expected/loading.3.html
index 30cba39..ce474d4 100644
--- a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-only/renders.expected/loading.3.html
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-only/renders.expected/loading.3.html
@@ -4,15 +4,11 @@
 <div
   data-src="embed"
   id="GENERATED-0"
->
-  <noscript
-    id="GENERATED-1"
-  />
-</div>
+/>
 <div
   data-from="test"
   data-slot="slot_1"
-  id="GENERATED-2"
+  id="GENERATED-1"
 >
   <p>
     test_html for slot_1
@@ -22,63 +18,20 @@
 <div
   data-from="test"
   data-slot="slot_2"
-  id="GENERATED-3"
+  id="GENERATED-2"
 >
   <p>
     test_html for slot_2
   </p>
 </div>
 <div
-  data-src="embed"
-  id="GENERATED-4"
->
-  <noscript
-    id="GENERATED-5"
-  />
-</div>
-<div
-  data-from="test2"
-  data-slot="slot_1"
-  id="GENERATED-6"
->
-  <p>
-    test_2_html for slot_1
-  </p>
-  next chunk for slot_1
-</div>
-<div
-  data-from="test2"
-  data-slot="slot_2"
-  id="GENERATED-7"
->
-  <p>
-    test_2_html for slot_2
-  </p>
-</div>
-<div
-  id="GENERATED-8"
-  style="display:none"
->
-  <noscript
-    id="GENERATED-9"
-  />
-</div>
-<div
-  id="GENERATED-10"
-  style="display:none"
->
-  <noscript
-    id="GENERATED-11"
-  />
-</div>
-<div
-  id="GENERATED-12"
+  id="GENERATED-3"
   style="display:none"
 />
 <div
-  id="GENERATED-13"
+  id="GENERATED-4"
   style="display:none"
 />
 <script>
-  function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b&lt;f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b&lt;f;b++)c(a[b])}};$af(0);$af(1);$af(2);$af(3)
+  function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b&lt;f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b&lt;f;b++)c(a[b])}};$af(0);$af(1)
 </script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-invalid-sourcename/renders.expected/loading.0.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/loading.0.html
similarity index 67%
rename from src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-invalid-sourcename/renders.expected/loading.0.html
rename to src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/loading.0.html
index bc935fa..721429b 100644
--- a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-invalid-sourcename/renders.expected/loading.0.html
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/loading.0.html
@@ -1,6 +1,9 @@
 <div>
   Host app
 </div>
+<button>
+  Change
+</button>
 <div
   data-src="embed"
   id="GENERATED-0"
@@ -9,9 +12,8 @@
     id="GENERATED-1"
   />
 </div>
-Slot_1 Error: micro-frame-sse test_error is not defined.
 <div
   data-from="test"
-  data-slot="slot_2"
+  data-slot="slot_1"
   id="GENERATED-2"
 />
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-invalid-sourcename/renders.expected/loading.1.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/loading.1.html
similarity index 63%
rename from src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-invalid-sourcename/renders.expected/loading.1.html
rename to src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/loading.1.html
index c935168..99f8541 100644
--- a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-invalid-sourcename/renders.expected/loading.1.html
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/loading.1.html
@@ -1,6 +1,9 @@
 <div>
   Host app
 </div>
+<button>
+  Change
+</button>
 <div
   data-src="embed"
   id="GENERATED-0"
@@ -9,13 +12,12 @@
     id="GENERATED-1"
   />
 </div>
-Slot_1 Error: micro-frame-sse test_error is not defined.
 <div
   data-from="test"
-  data-slot="slot_2"
+  data-slot="slot_1"
   id="GENERATED-2"
 >
   <p>
-    test_html for slot_2
+    test_html for slot_1
   </p>
 </div>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/loading.2.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/loading.2.html
new file mode 100644
index 0000000..808df14
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/loading.2.html
@@ -0,0 +1,24 @@
+<div>
+  Host app
+</div>
+<button>
+  Change
+</button>
+<div
+  data-src="embed"
+  id="GENERATED-0"
+>
+  <noscript
+    id="GENERATED-1"
+  />
+</div>
+<div
+  data-from="test"
+  data-slot="slot_1"
+  id="GENERATED-2"
+>
+  <p>
+    test_html for slot_1
+  </p>
+  next chunk for slot_1
+</div>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-only/renders.expected/loading.4.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/loading.3.html
similarity index 63%
rename from src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-only/renders.expected/loading.4.html
rename to src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/loading.3.html
index 608d35d..4a1b2fd 100644
--- a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-only/renders.expected/loading.4.html
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/loading.3.html
@@ -1,14 +1,21 @@
 <div>
   Host app
 </div>
+<button>
+  Change
+</button>
 <div
   data-src="embed"
   id="GENERATED-0"
-/>
+>
+  <noscript
+    id="GENERATED-1"
+  />
+</div>
 <div
   data-from="test"
   data-slot="slot_1"
-  id="GENERATED-1"
+  id="GENERATED-2"
 >
   <p>
     test_html for slot_1
@@ -18,51 +25,24 @@
 <div
   data-from="test"
   data-slot="slot_2"
-  id="GENERATED-2"
+  id="GENERATED-3"
 >
   <p>
     test_html for slot_2
   </p>
 </div>
 <div
-  data-src="embed"
-  id="GENERATED-3"
-/>
-<div
-  data-from="test2"
-  data-slot="slot_1"
   id="GENERATED-4"
+  style="display:none"
 >
-  <p>
-    test_2_html for slot_1
-  </p>
-  next chunk for slot_1
-</div>
-<div
-  data-from="test2"
-  data-slot="slot_2"
-  id="GENERATED-5"
->
-  <p>
-    test_2_html for slot_2
-  </p>
+  <noscript
+    id="GENERATED-5"
+  />
 </div>
 <div
   id="GENERATED-6"
   style="display:none"
 />
-<div
-  id="GENERATED-7"
-  style="display:none"
-/>
-<div
-  id="GENERATED-8"
-  style="display:none"
-/>
-<div
-  id="GENERATED-9"
-  style="display:none"
-/>
 <script>
-  function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b&lt;f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b&lt;f;b++)c(a[b])}};$af(0);$af(1);$af(2);$af(3)
+  function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b&lt;f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b&lt;f;b++)c(a[b])}};$af(0);$af(1);$ssr_then_csr_change_src_index_C=(window.$ssr_then_csr_change_src_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["my0RHRpQ"]})
 </script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-invalid-sourcename/renders.expected/loading.2.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/loading.4.html
similarity index 60%
rename from src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-invalid-sourcename/renders.expected/loading.2.html
rename to src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/loading.4.html
index 2dd02d4..b884d57 100644
--- a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-invalid-sourcename/renders.expected/loading.2.html
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/loading.4.html
@@ -1,36 +1,29 @@
 <div>
   Host app
 </div>
-<div
-  data-src="embed"
-  id="GENERATED-0"
->
-  <noscript
-    id="GENERATED-1"
-  />
+<button>
+  Change
+</button>
+<div />
+<div>
+  <p>
+    test_html for slot_1
+  </p>
+  next chunk for slot_1
 </div>
-Slot_1 Error: micro-frame-sse test_error is not defined.
-<div
-  data-from="test"
-  data-slot="slot_2"
-  id="GENERATED-2"
->
+<div>
   <p>
     test_html for slot_2
   </p>
 </div>
 <div
-  id="GENERATED-3"
+  id="GENERATED-0"
   style="display:none"
->
-  <noscript
-    id="GENERATED-4"
-  />
-</div>
+/>
 <div
-  id="GENERATED-5"
+  id="GENERATED-1"
   style="display:none"
 />
 <script>
-  function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b&lt;f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b&lt;f;b++)c(a[b])}};$af(0);$af(1)
+  function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b&lt;f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b&lt;f;b++)c(a[b])}};$af(0);$af(1);$ssr_then_csr_change_src_index_C=(window.$ssr_then_csr_change_src_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["my0RHRpQ"]})
 </script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.0.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.0.html
new file mode 100644
index 0000000..d5debbf
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.0.html
@@ -0,0 +1,20 @@
+<div>
+  Host app
+</div>
+<button>
+  Change
+</button>
+<div />
+<div />
+<div />
+<div
+  id="GENERATED-0"
+  style="display:none"
+/>
+<div
+  id="GENERATED-1"
+  style="display:none"
+/>
+<script>
+  function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b&lt;f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b&lt;f;b++)c(a[b])}};$af(0);$af(1);$ssr_then_csr_change_src_index_C=(window.$ssr_then_csr_change_src_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["my0RHRpQ"]})
+</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-invalid-sourcename/renders.expected/loading.3.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.1.html
similarity index 64%
rename from src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-invalid-sourcename/renders.expected/loading.3.html
rename to src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.1.html
index 80cb268..1217e3f 100644
--- a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-invalid-sourcename/renders.expected/loading.3.html
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.1.html
@@ -1,28 +1,24 @@
 <div>
   Host app
 </div>
-<div
-  data-src="embed"
-  id="GENERATED-0"
-/>
-Slot_1 Error: micro-frame-sse test_error is not defined.
-<div
-  data-from="test"
-  data-slot="slot_2"
-  id="GENERATED-1"
->
+<button>
+  Change
+</button>
+<div />
+<div>
   <p>
-    test_html for slot_2
+    test_html for slot_1
   </p>
 </div>
+<div />
 <div
-  id="GENERATED-2"
+  id="GENERATED-0"
   style="display:none"
 />
 <div
-  id="GENERATED-3"
+  id="GENERATED-1"
   style="display:none"
 />
 <script>
-  function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b&lt;f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b&lt;f;b++)c(a[b])}};$af(0);$af(1)
+  function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b&lt;f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b&lt;f;b++)c(a[b])}};$af(0);$af(1);$ssr_then_csr_change_src_index_C=(window.$ssr_then_csr_change_src_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["my0RHRpQ"]})
 </script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.2.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.2.html
new file mode 100644
index 0000000..a9859be
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.2.html
@@ -0,0 +1,28 @@
+<div>
+  Host app
+</div>
+<button>
+  Change
+</button>
+<div />
+<div>
+  <p>
+    test_html for slot_1
+  </p>
+</div>
+<div>
+  <p>
+    test_html for slot_2
+  </p>
+</div>
+<div
+  id="GENERATED-0"
+  style="display:none"
+/>
+<div
+  id="GENERATED-1"
+  style="display:none"
+/>
+<script>
+  function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b&lt;f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b&lt;f;b++)c(a[b])}};$af(0);$af(1);$ssr_then_csr_change_src_index_C=(window.$ssr_then_csr_change_src_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["my0RHRpQ"]})
+</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.3.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.3.html
new file mode 100644
index 0000000..d13d45b
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-csr-change-src/renders.expected/step-0.3.html
@@ -0,0 +1,29 @@
+<div>
+  Host app
+</div>
+<button>
+  Change
+</button>
+<div />
+<div>
+  <p>
+    test_html for slot_1
+  </p>
+  after src change
+</div>
+<div>
+  <p>
+    test_html for slot_2
+  </p>
+</div>
+<div
+  id="GENERATED-0"
+  style="display:none"
+/>
+<div
+  id="GENERATED-1"
+  style="display:none"
+/>
+<script>
+  function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b&lt;f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b&lt;f;b++)c(a[b])}};$af(0);$af(1);$ssr_then_csr_change_src_index_C=(window.$ssr_then_csr_change_src_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["my0RHRpQ"]})
+</script>
\ No newline at end of file
diff --git a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-toggle-slot/renders.expected/step-1.0.html b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-toggle-slot/renders.expected/step-1.0.html
index 0ab4a8f..270dd5d 100644
--- a/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-toggle-slot/renders.expected/step-1.0.html
+++ b/src/components/micro-frame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-then-toggle-slot/renders.expected/step-1.0.html
@@ -5,9 +5,7 @@
   Toggle
 </button>
 <div />
-<div>
-  Slot_1 Error: micro-frame-sse test is not defined or server-side rendered.
-</div>
+<div />
 <div />
 <div
   id="GENERATED-0"
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/csr-invalid-sourcename/components/app.marko b/src/components/micro-frame-sse/__tests__/fixtures/csr-invalid-sourcename/components/app.marko
deleted file mode 100644
index 0986223..0000000
--- a/src/components/micro-frame-sse/__tests__/fixtures/csr-invalid-sourcename/components/app.marko
+++ /dev/null
@@ -1,18 +0,0 @@
-class {
-  onCreate() {
-    this.state = { mounted: false };
-  }
-  onMount() {
-    this.state.mounted = true;
-  }
-}
-
-<if(state.mounted)>
-  <micro-frame-sse src="embed" name="test" read=(e => [e.lastEventId, e.data]) />
-  <micro-frame-slot from="test_error" slot="slot_1">
-    <@catch|err|>
-      Slot_1 Error: ${err.message}
-    </@catch>
-  </micro-frame-slot>
-  <micro-frame-slot from="test" slot="slot_2" />
-</if>
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/csr-then-change-src/components/app.marko b/src/components/micro-frame-sse/__tests__/fixtures/csr-then-change-src/components/app.marko
new file mode 100644
index 0000000..18ba00b
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/fixtures/csr-then-change-src/components/app.marko
@@ -0,0 +1,19 @@
+class {
+  onCreate() {
+    this.state = { mounted: false, open: true, src: "embed", slots: ["slot_1", "slot_2"] };
+  }
+  onMount() {
+    this.state.mounted = true;
+  }
+  change() {
+    this.state.src = "embed_2";
+  }
+}
+
+<button onClick("change")>Change</button>
+<if(state.mounted && state.open)>
+  <micro-frame-sse src=state.src name="test" read=(e => [e.lastEventId, e.data]) />
+  <for|slot| of=state.slots>
+    <micro-frame-slot from="test" slot=slot />
+  </for>
+</if>
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/csr-invalid-sourcename/embed.marko b/src/components/micro-frame-sse/__tests__/fixtures/csr-then-change-src/embed.marko
similarity index 100%
rename from src/components/micro-frame-sse/__tests__/fixtures/csr-invalid-sourcename/embed.marko
rename to src/components/micro-frame-sse/__tests__/fixtures/csr-then-change-src/embed.marko
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/csr-then-change-src/embed_2.marko b/src/components/micro-frame-sse/__tests__/fixtures/csr-then-change-src/embed_2.marko
new file mode 100644
index 0000000..13b3c3f
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/fixtures/csr-then-change-src/embed_2.marko
@@ -0,0 +1,25 @@
+import { wait } from "../../../../../__tests__/queue";
+import fs from "fs";
+import path from "path";
+
+$ const slot_1_html = fs.readFileSync(path.resolve(__dirname ,'slot_1.html'), 'utf8');
+$ const slot_2_html = fs.readFileSync(path.resolve(__dirname ,'slot_2.html'), 'utf8');
+$ const first = `id: slot_1\ndata: ${slot_1_html.replace(/\r?\n/g, '')}\n\n`;
+$ const second = `id: slot_2\ndata: ${slot_2_html.replace(/\r?\n/g, '')}\n\n`;
+$ const third = `id: slot_1\ndata: after src change\n\n`;
+
+<await(wait())>
+  <@then>
+    $!{first}
+    <await(wait())>
+      <@then>
+        $!{second}
+        <await(wait())>
+          <@then>
+            $!{third}
+          </@then>
+        </await>
+      </@then>
+    </await>
+  </@then>
+</await>
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/csr-invalid-sourcename/index.marko b/src/components/micro-frame-sse/__tests__/fixtures/csr-then-change-src/index.marko
similarity index 100%
rename from src/components/micro-frame-sse/__tests__/fixtures/csr-invalid-sourcename/index.marko
rename to src/components/micro-frame-sse/__tests__/fixtures/csr-then-change-src/index.marko
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/csr-invalid-sourcename/slot_1.html b/src/components/micro-frame-sse/__tests__/fixtures/csr-then-change-src/slot_1.html
similarity index 100%
rename from src/components/micro-frame-sse/__tests__/fixtures/csr-invalid-sourcename/slot_1.html
rename to src/components/micro-frame-sse/__tests__/fixtures/csr-then-change-src/slot_1.html
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/csr-invalid-sourcename/slot_2.html b/src/components/micro-frame-sse/__tests__/fixtures/csr-then-change-src/slot_2.html
similarity index 100%
rename from src/components/micro-frame-sse/__tests__/fixtures/csr-invalid-sourcename/slot_2.html
rename to src/components/micro-frame-sse/__tests__/fixtures/csr-then-change-src/slot_2.html
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-invalid-sourcename/index.marko b/src/components/micro-frame-sse/__tests__/fixtures/ssr-invalid-sourcename/index.marko
deleted file mode 100644
index 2f31d45..0000000
--- a/src/components/micro-frame-sse/__tests__/fixtures/ssr-invalid-sourcename/index.marko
+++ /dev/null
@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Simple Example</title>
-  <esbuild-assets/>
-</head>
-<body>
-  <div>Host app</div>
-  <micro-frame-sse src="embed" name="test" read=(e => [e.lastEventId, e.data]) />
-  <micro-frame-slot from="test_error" slot="slot_1">
-    <@catch|err|>
-      Slot_1 Error: ${err.message}
-    </@catch>
-  </micro-frame-slot>
-  <micro-frame-slot from="test" slot="slot_2" />
-</body>
-</html>
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-only/index.marko b/src/components/micro-frame-sse/__tests__/fixtures/ssr-only/index.marko
index 657a234..f357c26 100644
--- a/src/components/micro-frame-sse/__tests__/fixtures/ssr-only/index.marko
+++ b/src/components/micro-frame-sse/__tests__/fixtures/ssr-only/index.marko
@@ -11,8 +11,5 @@
   <micro-frame-sse src="embed" name="test" read=(e => [e.lastEventId, e.data]) />
   <micro-frame-slot from="test" slot="slot_1" />
   <micro-frame-slot from="test" slot="slot_2" />
-  <micro-frame-sse src="embed" name="test2" read=(e => [e.lastEventId, e.data.replace("test", "test_2")]) />
-  <micro-frame-slot from="test2" slot="slot_1" />
-  <micro-frame-slot from="test2" slot="slot_2" />
 </body>
 </html>
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-then-csr-change-src/components/app.marko b/src/components/micro-frame-sse/__tests__/fixtures/ssr-then-csr-change-src/components/app.marko
new file mode 100644
index 0000000..0f9a333
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/fixtures/ssr-then-csr-change-src/components/app.marko
@@ -0,0 +1,14 @@
+class {
+  onCreate() {
+    this.state = { src: "embed", name: "test", slots: ["slot_1", "slot_2"] };
+  }
+  change() {
+    this.state.src = "embed_2";
+  }
+}
+
+<button onClick("change")>Change</button>
+<micro-frame-sse src=state.src name=state.name read=(e => [e.lastEventId, e.data]) />
+<for|slot| of=state.slots>
+  <micro-frame-slot from=state.name slot=slot />
+</for>
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-invalid-sourcename/embed.marko b/src/components/micro-frame-sse/__tests__/fixtures/ssr-then-csr-change-src/embed.marko
similarity index 90%
rename from src/components/micro-frame-sse/__tests__/fixtures/ssr-invalid-sourcename/embed.marko
rename to src/components/micro-frame-sse/__tests__/fixtures/ssr-then-csr-change-src/embed.marko
index d51be64..cd21d1c 100644
--- a/src/components/micro-frame-sse/__tests__/fixtures/ssr-invalid-sourcename/embed.marko
+++ b/src/components/micro-frame-sse/__tests__/fixtures/ssr-then-csr-change-src/embed.marko
@@ -6,7 +6,7 @@ $ const slot_1_html = fs.readFileSync(path.resolve(__dirname ,'slot_1.html'), 'u
 $ const slot_2_html = fs.readFileSync(path.resolve(__dirname ,'slot_2.html'), 'utf8');
 $ const first = `id: slot_1\ndata: ${slot_1_html.replace(/\r?\n/g, '')}\n\n`;
 $ const second = `id: slot_2\ndata: ${slot_2_html.replace(/\r?\n/g, '')}\n\n`;
-$ const third = `id: slot_1\ntype: update\ndata: next chunk for slot_1`;
+$ const third = `id: slot_1\ndata: next chunk for slot_1\n\n`;
 
 <await(wait())>
   <@then>
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-then-csr-change-src/embed_2.marko b/src/components/micro-frame-sse/__tests__/fixtures/ssr-then-csr-change-src/embed_2.marko
new file mode 100644
index 0000000..13b3c3f
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/fixtures/ssr-then-csr-change-src/embed_2.marko
@@ -0,0 +1,25 @@
+import { wait } from "../../../../../__tests__/queue";
+import fs from "fs";
+import path from "path";
+
+$ const slot_1_html = fs.readFileSync(path.resolve(__dirname ,'slot_1.html'), 'utf8');
+$ const slot_2_html = fs.readFileSync(path.resolve(__dirname ,'slot_2.html'), 'utf8');
+$ const first = `id: slot_1\ndata: ${slot_1_html.replace(/\r?\n/g, '')}\n\n`;
+$ const second = `id: slot_2\ndata: ${slot_2_html.replace(/\r?\n/g, '')}\n\n`;
+$ const third = `id: slot_1\ndata: after src change\n\n`;
+
+<await(wait())>
+  <@then>
+    $!{first}
+    <await(wait())>
+      <@then>
+        $!{second}
+        <await(wait())>
+          <@then>
+            $!{third}
+          </@then>
+        </await>
+      </@then>
+    </await>
+  </@then>
+</await>
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-then-csr-change-src/index.marko b/src/components/micro-frame-sse/__tests__/fixtures/ssr-then-csr-change-src/index.marko
new file mode 100644
index 0000000..267d8b1
--- /dev/null
+++ b/src/components/micro-frame-sse/__tests__/fixtures/ssr-then-csr-change-src/index.marko
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Simple Example</title>
+  <esbuild-assets/>
+</head>
+<body>
+  <div>Host app</div>
+  <app/>
+</body>
+</html>
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-invalid-sourcename/slot_1.html b/src/components/micro-frame-sse/__tests__/fixtures/ssr-then-csr-change-src/slot_1.html
similarity index 100%
rename from src/components/micro-frame-sse/__tests__/fixtures/ssr-invalid-sourcename/slot_1.html
rename to src/components/micro-frame-sse/__tests__/fixtures/ssr-then-csr-change-src/slot_1.html
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-invalid-sourcename/slot_2.html b/src/components/micro-frame-sse/__tests__/fixtures/ssr-then-csr-change-src/slot_2.html
similarity index 100%
rename from src/components/micro-frame-sse/__tests__/fixtures/ssr-invalid-sourcename/slot_2.html
rename to src/components/micro-frame-sse/__tests__/fixtures/ssr-then-csr-change-src/slot_2.html
diff --git a/src/components/micro-frame-sse/__tests__/server.test.ts b/src/components/micro-frame-sse/__tests__/server.test.ts
index 19754d1..a338f73 100644
--- a/src/components/micro-frame-sse/__tests__/server.test.ts
+++ b/src/components/micro-frame-sse/__tests__/server.test.ts
@@ -40,6 +40,20 @@ describe("micro-frame-sse", () => {
     ])
   );
 
+  describe(
+    "csr then change src",
+    fixture(path.join(__dirname, "fixtures/csr-then-change-src"), [
+      async (page) => await page.click("text=Change"),
+    ])
+  );
+
+  describe(
+    "ssr then csr change src",
+    fixture(path.join(__dirname, "fixtures/ssr-then-csr-change-src"), [
+      async (page) => await page.click("text=Change"),
+    ])
+  );
+
   describe(
     "csr then toggle slot",
     fixture(path.join(__dirname, "fixtures/csr-then-toggle-slot"), [
@@ -147,16 +161,6 @@ describe("micro-frame-sse", () => {
 
   describe("ssr 404", fixture(path.join(__dirname, "fixtures/ssr-404")));
 
-  describe(
-    "csr invalid sourcename",
-    fixture(path.join(__dirname, "fixtures/csr-invalid-sourcename"))
-  );
-
-  describe(
-    "ssr invalid sourcename",
-    fixture(path.join(__dirname, "fixtures/ssr-invalid-sourcename"))
-  );
-
   describe(
     "custom read",
     fixture(path.join(__dirname, "fixtures/custom-read"))
diff --git a/src/components/stream-source/component/StreamSource.ts b/src/components/stream-source/component/StreamSource.ts
index d8f2d55..b29c913 100644
--- a/src/components/stream-source/component/StreamSource.ts
+++ b/src/components/stream-source/component/StreamSource.ts
@@ -1,9 +1,10 @@
 import createWritable, { StreamWritable } from "./StreamWritable";
 
-export const STREAM_SOURCE_MAP_CLIENT: Map<string, StreamSource> = new Map();
+type InvalidateHandler = (newSrc: string) => void;
 class StreamSource {
-  private readonly _slots: Map<string, StreamWritable>;
-  private _closed: boolean;
+  private readonly _slots = new Map<string, StreamWritable>();
+  private _invalidateHandlers = new Set<InvalidateHandler>();
+  private _closed = false;
 
   private getOrCreateSlot(id: string): StreamWritable {
     if (this._slots.has(id)) {
@@ -15,11 +16,6 @@ class StreamSource {
     return newSlot;
   }
 
-  constructor() {
-    this._slots = new Map();
-    this._closed = false;
-  }
-
   async run(parserIterator: AsyncIterator<string[]>) {
     // eslint-disable-next-line no-constant-condition
     while (true) {
@@ -46,6 +42,22 @@ class StreamSource {
       err ? slot.error(err) : slot.end()
     );
   }
+
+  onInvalidate(handler: InvalidateHandler) {
+    this._invalidateHandlers.add(handler);
+  }
+
+  offInvalidate(handler: InvalidateHandler) {
+    this._invalidateHandlers.delete(handler);
+  }
+
+  invalidate(newSrc: string) {
+    this._slots.clear();
+    this._closed = false;
+    for (const handler of this._invalidateHandlers) {
+      handler(newSrc);
+    }
+  }
 }
 
 export default StreamSource;
diff --git a/src/components/stream-source/component/helper.ts b/src/components/stream-source/component/helper.ts
new file mode 100644
index 0000000..fe2fec3
--- /dev/null
+++ b/src/components/stream-source/component/helper.ts
@@ -0,0 +1,20 @@
+import StreamSource from "./StreamSource";
+
+const streamSourceMapKey = Symbol("stream-source");
+export const getOrCreateStreamSource = (
+  name: string,
+  out?: any
+): StreamSource => {
+  const global: any = typeof document === "object" ? window : out?.global;
+  if (global === undefined) {
+    throw new Error("Server side out.global is missing.");
+  }
+  const store = (global[streamSourceMapKey] ??= new Map());
+  if (store.has(name)) {
+    return store.get(name) as StreamSource;
+  }
+
+  const streamSource = new StreamSource();
+  store.set(name, streamSource);
+  return streamSource;
+};
diff --git a/src/components/stream-source/component/node.marko b/src/components/stream-source/component/node.marko
index 80b8d90..120658e 100644
--- a/src/components/stream-source/component/node.marko
+++ b/src/components/stream-source/component/node.marko
@@ -1,6 +1,6 @@
 import fetch from "make-fetch-happen";
 import path from "path";
-import StreamSource from "./StreamSource";
+import { getOrCreateStreamSource } from "./helper";
 
 static const cachePath = path.resolve("node_modules/.cache/fetch");
 
@@ -27,13 +27,7 @@ $ const request = async () => {
   return res;
 }
 
-$ {
-  const streamSource = new StreamSource();
-  if (out.global.STREAM_SOURCE_MAP_SERVER === undefined) {
-    out.global.STREAM_SOURCE_MAP_SERVER = new Map();
-  }
-  out.global.STREAM_SOURCE_MAP_SERVER.set(input.name, streamSource);
-}
+$ const streamSource = getOrCreateStreamSource(input.name, out);
 
 <div id=component.id data-src=input.src>
   $ out.bf("@_", component, true);
diff --git a/src/components/stream-source/component/web.component.ts b/src/components/stream-source/component/web.component.ts
index ae51a85..f5a42bf 100644
--- a/src/components/stream-source/component/web.component.ts
+++ b/src/components/stream-source/component/web.component.ts
@@ -1,4 +1,5 @@
-import StreamSource, { STREAM_SOURCE_MAP_CLIENT } from "./StreamSource";
+import StreamSource from "./StreamSource";
+import { getOrCreateStreamSource } from "./helper";
 
 interface Input {
   src: string;
@@ -35,30 +36,29 @@ function readableToAsyncIterator(
 }
 
 export = {
-  onCreate(input) {
+  onCreate() {
     const ssrEl = document.getElementById(this.id);
     if (ssrEl) {
       this.src = ssrEl.dataset.src;
       ssrEl.removeAttribute("data-src");
       ssrEl.removeAttribute("id");
-    } else {
-      const streamSource = new StreamSource();
-      STREAM_SOURCE_MAP_CLIENT.set(input.name, streamSource);
-      this.streamSource = streamSource;
     }
   },
   onMount() {
     // Only trigger a new load if this wasn't ssr'd, or the src has changed.
+    this.streamSource = getOrCreateStreamSource(this.input.name);
     this.onUpdate();
   },
   onDestroy() {
     this.controller?.abort();
   },
   async onUpdate() {
-    if (this.src === this.input.src || !this.streamSource) return;
+    if (this.src === this.input.src) return;
 
-    this.controller?.abort();
     this.src = this.input.src;
+    this.streamSource.invalidate(this.input.src);
+
+    this.controller?.abort();
     const controller = (this.controller = new AbortController());
     let err: Error | undefined;
 
@@ -87,7 +87,7 @@ export = {
   method: string | undefined;
   controller: AbortController | undefined;
   onUpdate(): unknown;
-  onCreate(input: Input): unknown;
+  onCreate(): unknown;
   onMount(): unknown;
   onDestroy(): unknown;
 };