fix: resolve hydration mismatch, GoatCounter 400, and improve FCP

caishengold · caishengold · commit f1d7d1bb6b20 · 2026-02-26T17:56:21.000+08:00
- Replace raw <script> with next/script lazyOnload for GoatCounter - Fix protocol-relative URL (//gc.zgo.at → https://gc.zgo.at) - Add suppressHydrationWarning on JSON-LD script - Dynamic import LivePulse and TheMirror for code splitting - Add dns-prefetch and preconnect for gc.zgo.at Made-with: Cursor
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import Script from "next/script";
 import "./globals.css";
 import Navigation from "@/components/Navigation";
 import { AuthProvider } from "@/lib/auth-context";
@@ -48,9 +49,17 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" className="dark">
+      <head>
+        <link rel="dns-prefetch" href="https://gc.zgo.at" />
+        <link rel="preconnect" href="https://gc.zgo.at" crossOrigin="anonymous" />
+      </head>
       <body className="font-sans min-w-0">
-        <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
-        <script data-goatcounter="https://agentlove.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
+        <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} suppressHydrationWarning />
+        <Script
+          src="https://gc.zgo.at/count.js"
+          data-goatcounter="https://agentlove.goatcounter.com/count"
+          strategy="lazyOnload"
+        />
         <AuthProvider>
         <div className="min-w-0 max-w-[100vw] overflow-x-clip">
           <Navigation />
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,8 +1,10 @@
 import Link from 'next/link';
+import dynamic from 'next/dynamic';
 import { apiFetch } from '@/lib/api-server';
 import { CurlBlock } from '@/components/CurlBlock';
-import LivePulse from '@/components/LivePulse';
-import TheMirror from '@/components/TheMirror';
+
+const LivePulse = dynamic(() => import('@/components/LivePulse'));
+const TheMirror = dynamic(() => import('@/components/TheMirror'));
 
 export const revalidate = 3600;
 
