Skip to content

Commit c33c1ea

Browse files
committed
fix(rank): DocShareButton 改为 ssr:false 修复 hydration mismatch
fumadocs 的 PageTOCPopover 内部调 useId 生成 Radix Collapsible 的 aria-controls, DocShareButton 参与 SSR 时会让 server/client 的 useId 计数错位,导致 aria-controls 在 hydration 阶段不一致。改用 next/dynamic { ssr: false } 仅在 客户端 mount 这个按钮,保持 fumadocs 的 useId 顺序稳定。
1 parent 9172f48 commit c33c1ea

1 file changed

Lines changed: 14 additions & 1 deletion

File tree

app/docs/[...slug]/page.tsx

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,20 @@ import { Contributors } from "@/app/components/Contributors";
1414
import { DocsAssistant } from "@/app/components/DocsAssistant";
1515
import { LicenseNotice } from "@/app/components/LicenseNotice";
1616
import { PageFeedback } from "@/app/components/PageFeedback";
17-
import { DocShareButton } from "@/app/components/DocShareButton";
17+
import dynamic from "next/dynamic";
18+
19+
// 仅在客户端渲染 DocShareButton:
20+
// 该按钮挂在 fumadocs DocsPage 内部,fumadocs 的 PageTOCPopover 会调 useId 生成
21+
// Radix Collapsible 的 aria-controls;如果 DocShareButton 参与 SSR,会让 server 端
22+
// 的 useId 计数与 client 端不一致,触发 hydration mismatch。
23+
// 改为 ssr: false 后此按钮完全在客户端 mount,不再污染 fumadocs 的 useId 顺序。
24+
const DocShareButton = dynamic(
25+
() =>
26+
import("@/app/components/DocShareButton").then((m) => ({
27+
default: m.DocShareButton,
28+
})),
29+
{ ssr: false },
30+
);
1831
// Extract clean text content from MDX - no longer used on client/page side
1932
// content fetching moved to API route for performance
2033

0 commit comments

Comments
 (0)