diff --git a/examples/spa/src/components/Counter.vue b/examples/spa/src/components/Counter.vue
index 599bcf615f..5ba3ae2ca6 100644
--- a/examples/spa/src/components/Counter.vue
+++ b/examples/spa/src/components/Counter.vue
@@ -1,16 +1,45 @@
 <template>
 	<div id="vue" class="counter">
-		<button @click="subtract()">-</button>
-		<pre>{{ count }}</pre>
-		<button @click="add()">+</button>
+		<p><slot /></p>
+		<div>
+			<button @click="subtract()">-</button>
+			<pre>{{ count }}</pre>
+			<button @click="add()">+</button>
+		</div>
 	</div>
 </template>
 
+<style scoped>
+	.counter {
+		display: flex;
+		text-align: center;
+		flex-direction: column;
+		padding: 0.5rem;
+		margin: 0.25rem;
+		border: 1px solid red;
+		min-width: 12em;
+		font-size: 1.25rem;
+	}
+	p {
+		flex: 1;
+	}
+	.counter > div {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.25rem;
+	}
+</style>
+
 <script>
 import { ref } from 'vue';
 export default {
-	setup() {
-		const count = ref(0);
+	props: {
+		initialCount: Number,
+	},
+	setup({ initialCount = 0 }) {
+		const count = ref(initialCount);
 		const add = () => (count.value = count.value + 1);
 		const subtract = () => (count.value = count.value - 1);
 
diff --git a/examples/spa/src/pages/[pokemon].astro b/examples/spa/src/pages/[pokemon].astro
index ab45fd42eb..94fa7b51f5 100644
--- a/examples/spa/src/pages/[pokemon].astro
+++ b/examples/spa/src/pages/[pokemon].astro
@@ -6,25 +6,38 @@ export async function getStaticPaths() {
   return allPokemon.map((pokemon, i, all) => ({
 		params: { pokemon: pokemon.name },
 		props: {
-			pos: Math.random() > 0.5 ? Math.random() > 0.5 ? 'top' : 'bottom' : null,
 			prev: `/${all[i - 1]?.name ?? ''}`,
+			index: i,
 			pokemon,
 			next: `/${all[i + 1]?.name ?? ''}`,
 		}
 	}));
 }
 
-const { pos, pokemon, prev, next } = Astro.props;
+const { pokemon, prev, next } = Astro.props;
 ---
 <html lang="en">
   <head>
     <title>{pokemon.name}</title>
+		<style>
+			main {
+				display: flex;
+			}
+		</style>
   </head>
 
   <body>
-		{pos === 'top' && <Counter client:visible />}
     <h1>{pokemon.name}</h1>
-		{pos === 'bottom' && <Counter client:visible />}
+
+		<main>
+			<Counter client:visible use:mode="persistent">
+				Persistent!
+			</Counter>
+
+			<Counter client:visible>
+				Not Persistent!
+			</Counter>
+		</main>
 
 		<p><a href={prev}>Previous</a> / <a href={next}>Next</a></p>
   </body>
diff --git a/packages/astro/package.json b/packages/astro/package.json
index af6e29758d..7e1e2908f7 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -85,7 +85,7 @@
     "htmlparser2": "^7.1.2",
     "kleur": "^4.1.4",
     "magic-string": "^0.25.7",
-    "micromorph": "^0.0.9",
+    "micromorph": "^0.1.1",
     "mime": "^3.0.0",
     "parse5": "^6.0.1",
     "path-to-regexp": "^6.2.0",
diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts
index a2b3eca880..0e85a62abc 100644
--- a/packages/astro/src/@types/astro.ts
+++ b/packages/astro/src/@types/astro.ts
@@ -15,6 +15,7 @@ export interface AstroComponentMetadata {
 	displayName: string;
 	hydrate?: 'load' | 'idle' | 'visible' | 'media' | 'only';
 	hydrateArgs?: any;
+	mode?: 'persistent'|'ephemeral';
 	componentUrl?: string;
 	componentExport?: { value: string; namespace?: boolean };
 }
diff --git a/packages/astro/src/runtime/client/spa.ts b/packages/astro/src/runtime/client/spa.ts
index eeef919117..56cfc18986 100644
--- a/packages/astro/src/runtime/client/spa.ts
+++ b/packages/astro/src/runtime/client/spa.ts
@@ -1,6 +1,15 @@
 import listen from 'micromorph/spa'
 
 listen({
+	beforeDiff(doc) {
+		for (const island of doc.querySelectorAll('astro-root[data-persist]')) {
+			const uid = island.getAttribute('uid');
+			const current = document.querySelector(`astro-root[data-persist][uid="${uid}"]`)
+			if (current) {
+				island.replaceWith(current);
+			}
+		}
+	},
 	afterDiff() {
 		window.dispatchEvent(new CustomEvent('astro:locationchange'))
 	}
diff --git a/packages/astro/src/runtime/server/hydration.ts b/packages/astro/src/runtime/server/hydration.ts
index 2ffdc9144c..a94d202f09 100644
--- a/packages/astro/src/runtime/server/hydration.ts
+++ b/packages/astro/src/runtime/server/hydration.ts
@@ -15,6 +15,7 @@ interface ExtractedProps {
 	hydration: {
 		directive: string;
 		value: string;
+		mode: 'persistent'|'ephemeral';
 		componentUrl: string;
 		componentExport: { value: string };
 	} | null;
@@ -34,9 +35,13 @@ export function extractDirectives(inputProps: Record<string | number, any>): Ext
 				extracted.hydration = {
 					directive: '',
 					value: '',
+					mode: inputProps['use:mode'],
 					componentUrl: '',
 					componentExport: { value: '' },
 				};
+				if (extracted.hydration.mode != null) {
+					delete inputProps['use:mode'];
+				}
 			}
 			switch (key) {
 				case 'client:component-path': {
diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts
index 6fc02906d6..5f00e40e1e 100644
--- a/packages/astro/src/runtime/server/index.ts
+++ b/packages/astro/src/runtime/server/index.ts
@@ -154,6 +154,7 @@ export async function renderComponent(result: SSRResult, displayName: string, Co
 		metadata.hydrateArgs = hydration.value;
 		metadata.componentExport = hydration.componentExport;
 		metadata.componentUrl = hydration.componentUrl;
+		metadata.mode = hydration.mode;
 	}
 	const probableRendererNames = guessRenderers(metadata.componentUrl);
 
@@ -277,7 +278,7 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr
 	// Render a template if no fragment is provided.
 	const needsAstroTemplate = children && !/<\/?astro-fragment\>/.test(html);
 	const template = needsAstroTemplate ? `<template data-astro-template>${children}</template>` : '';
-	return unescapeHTML(`<astro-root ssr uid="${astroId}"${needsAstroTemplate ? ' tmpl' : ''}>${html ?? ''}${template}</astro-root>`);
+	return unescapeHTML(`<astro-root ssr uid="${astroId}"${needsAstroTemplate ? ' tmpl' : ''}${metadata.mode === 'persistent' ? ' data-persist' : ''}>${html ?? ''}${template}</astro-root>`);
 }
 
 /** Create the Astro.fetchContent() runtime function. */
diff --git a/yarn.lock b/yarn.lock
index 169c3a9f3e..015ef59f3a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5867,10 +5867,10 @@ micromatch@^4.0.2, micromatch@^4.0.4:
     braces "^3.0.1"
     picomatch "^2.2.3"
 
-micromorph@^0.0.9:
-  version "0.0.9"
-  resolved "https://registry.yarnpkg.com/micromorph/-/micromorph-0.0.9.tgz#6599ecbc62b7cd590a8abe94911c8a3ccf9dccd6"
-  integrity sha512-TOlmJcAoAsEWx3awnQUPPVGSZp0URiOxi61phmZcHApAVX43+eoywyvxgenhl/TkXUCnEpb0UbMn3NuP3QbkDg==
+micromorph@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/micromorph/-/micromorph-0.1.1.tgz#1772b07f1be6cae10b3210a0f84fe5364987f029"
+  integrity sha512-VIAYxW6D9yOkcMJK/G6xS1fh8r1gD+mmD4VLPKki7Xqzfrq1qlCfQAA6ITIbUnLDAHv8UpPPhCWzFJ29fiUjZQ==
 
 mime@1.6.0:
   version "1.6.0"
