diff --git a/.changeset/ready-cats-tease.md b/.changeset/ready-cats-tease.md
new file mode 100644
index 00000000000..2911d468559
--- /dev/null
+++ b/.changeset/ready-cats-tease.md
@@ -0,0 +1,5 @@
+---
+'@clerk/astro': patch
+---
+
+Fixed an issue when using `ClientRouter` where Clerk components don't load until navigation is performed.
diff --git a/packages/astro/src/integration/create-integration.ts b/packages/astro/src/integration/create-integration.ts
index 2d8cf566a68..dd566287a1f 100644
--- a/packages/astro/src/integration/create-integration.ts
+++ b/packages/astro/src/integration/create-integration.ts
@@ -125,9 +125,10 @@ function createIntegration<Params extends HotloadAstroClerkIntegrationParams>()
             }
 
             if (transitionEnabledOnThisPage()) {
-              const { navigate, swapFunctions } = await import('astro:transitions/client');
+              // We must do the dynamic imports within the event listeners because otherwise we may race and miss initial astro:page-load
+              document.addEventListener('astro:before-swap', async (e) => {
+                const { swapFunctions } = await import('astro:transitions/client');
 
-              document.addEventListener('astro:before-swap', (e) => {
                 const clerkComponents = document.querySelector('#clerk-components');
                 // Keep the div element added by Clerk
                 if (clerkComponents) {
@@ -139,6 +140,8 @@ function createIntegration<Params extends HotloadAstroClerkIntegrationParams>()
               });
 
               document.addEventListener('astro:page-load', async (e) => {
+                const { navigate } = await import('astro:transitions/client');
+
                 await runInjectionScript({
                   ...${JSON.stringify(internalParams)},
                   routerPush: navigate,