fix: PageHead header alignment, analytics proxy, and infra improvements (#64)

🤖 Pull request created from `various-fixes` containing PageHead
breadcrumbs and navigation alignment fixes, Umami analytics proxy, and
infrastructure updates.

packages/ssg/src/lib/config/analytics/types.ts

@@ -12,6 +12,8 @@ export interface AnalyticsHtmlTag {
   head?: boolean;
   /** Whether the tag should be appended at the end. */
   append?: boolean;
+  /** Whether to prepend publicPath / assetPrefix to the tag URL. Defaults to true in Rsbuild. */
+  publicPath?: boolean | string;
 }
 
 /**

packages/ssg/src/lib/config/analytics/umami.ts

@@ -92,6 +92,7 @@ export function umamiAnalytics(options: UmamiAnalyticsOptions): AnalyticsProvide
           tag: 'script',
           attrs,
           head: true,
+          publicPath: false,
         },
       ];
     },

packages/ssg/src/lib/config/ssg.ts

@@ -147,7 +147,7 @@ export function ssgPlugin(): RsbuildPlugin {
         const critters = new Critters({
           path: webDistPath,
           publicPath: configuredAssetPrefix,
-          preload: 'swap',
+          preload: 'media',
           inlineFonts: false,
           pruneSource: false,
           reduceInlineStyles: false,

packages/ssg/src/lib/core/createPage.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { createRoot, hydrateRoot } from 'react-dom/client';
 
 /**
  * Options for page creation.
@@ -15,9 +14,8 @@ export interface PageOptions {
  * Mounts or hydrates a React component into the `#root` element.
  *
  * Skips DOM mounting during the SSG server-side render pass
- * (`typeof window === 'undefined'`). On the client, hydrates if the
- * root already has children (SSG output), otherwise performs a fresh
- * `createRoot` render.
+ * (`typeof window === 'undefined'`). On the client, hydrates asynchronously
+ * during idle time to unblock First Contentful Paint.
  *
  * @param Component - The React component to render.
  * @param options - Optional page metadata (title, description).
@@ -45,17 +43,31 @@ export function createPage(Component: React.ComponentType, options: PageOptions
     metaDescription.setAttribute('content', options.description);
   }
 
-  if (rootElement) {
-    const node = (
-      <React.StrictMode>
-        <Component />
-      </React.StrictMode>
-    );
+  if (!rootElement) return;
 
-    if (rootElement.hasChildNodes()) {
-      hydrateRoot(rootElement, node);
-    } else {
-      createRoot(rootElement).render(node);
-    }
+  const mountOrHydrate = () => {
+    void import('react-dom/client')
+      .then(({ createRoot, hydrateRoot }) => {
+        const node = (
+          <React.StrictMode>
+            <Component />
+          </React.StrictMode>
+        );
+
+        if (rootElement.hasChildNodes()) {
+          hydrateRoot(rootElement, node);
+        } else {
+          createRoot(rootElement).render(node);
+        }
+      })
+      .catch((err: unknown) => {
+        console.error('[createPage] Client hydration failed:', err);
+      });
+  };
+
+  if ('requestIdleCallback' in window) {
+    window.requestIdleCallback(mountOrHydrate);
+  } else {
+    setTimeout(mountOrHydrate, 1);
   }
 }