极简Next.js项目随机出现Hydration Failed错误的原因排查求助

我最近在搭建前端应用时，卡同一个错误上好几个小时了——Hydration failed because the server rendered HTML didn't match the client，错误提示说会在客户端重新生成DOM树，还提到通常是SSR的客户端组件出了问题。

我查了不少资料，都说这个问题大概率是tsx文件里的标签嵌套错误导致的，但翻来覆去找不到自己代码里的问题。无奈之下我开始逐个删除文件排查，到最后已经删到只剩Next.js初始化项目的基础结构了，结果这个错误居然还会随机出现！

现在我剩下的代码只有这两个文件：

我的page.tsx #

'use client'
export default function Home() {
  return (
    <div className="min-h-screen bg-gray-50">
      test
    </div>
  );
}

默认生成的layout.tsx #

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Go Green Holidays",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`} >
        {children}
      </body>
    </html>
  );
}

最头疼的是这个错误不是每次都会触发，时有时无的，这让排查难度直接上升了一个档次。有没有大佬能帮我看看，就这么几行代码，到底哪里可能导致服务端和客户端的HTML不匹配啊？

内容来源于stack exchange