diff --git a/.changeset/wild-meals-beg.md b/.changeset/wild-meals-beg.md
new file mode 100644
index 00000000000..241e4aad984
--- /dev/null
+++ b/.changeset/wild-meals-beg.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/react": patch
+---
+
+Unblock hydration via use of async module scripts.
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index 3a6bef315da..72700735a4d 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -803,7 +803,9 @@ export function Scripts(props: ScriptProps) {
       .join("\n")}
 window.__remixRouteModules = {${matches
       .map((match, index) => `${JSON.stringify(match.route.id)}:route${index}`)
-      .join(",")}};`;
+      .join(",")}};
+      
+import(${JSON.stringify(manifest.entry.module)});`;
 
     return (
       <>
@@ -811,14 +813,15 @@ window.__remixRouteModules = {${matches
           {...props}
           suppressHydrationWarning
           dangerouslySetInnerHTML={createHtml(contextScript)}
+          type={undefined}
         />
-        <script {...props} src={manifest.url} />
+        <script {...props} type={undefined} src={manifest.url} />
         <script
           {...props}
           dangerouslySetInnerHTML={createHtml(routeModulesScript)}
           type="module"
+          async
         />
-        <script {...props} src={manifest.entry.module} type="module" />
       </>
     );
     // disabled deps array because we are purposefully only rendering this once
@@ -851,6 +854,11 @@ window.__remixRouteModules = {${matches
 
   return (
     <>
+      <link
+        rel="modulepreload"
+        href={manifest.entry.module}
+        crossOrigin={props.crossOrigin}
+      />
       {dedupe(preloads).map((path) => (
         <link
           key={path}