鉴于我有一个静态站点（https://abdullahraheel.tech/），唯一的交互功能是切换黑暗模式，我承认在服务器组件中使用**useState**是不可能的。
export default function RootLayout({ children }: { children: React.ReactNode }) {
const [darkMode, setDarkMode] = useState(true);
return (
<html lang="en">
<head />
<body className={inter.className}>
<div className={darkMode ? "dark" : ""}>
<main className="min-h-screen bg-white px-5 dark:bg-black absolute left-0 right-0 -z-50">
<FallingStar />
<Navbar darkMode={darkMode} setDarkMode={setDarkMode} />
<div className="mx-auto max-w-3xl z-50 mb-10">
{children}
<Footer />
</div>
<AnalyticsWrapper />
</main>
</div>
</body>
</html>
);
}字符串
给出上面的代码，我简单地将暗类应用到容器div中。暗模式在导航栏中切换。
在Next.js 13中，我利用layout.tsx中的“use client”关键字将整个布局转换为客户端组件。然而，考虑到我对默认启用的暗模式的偏好，我现在认识到将整个布局作为客户端组件可能不是最佳方法。因此，我想把网站转换成一个服务器端组件，可以在以后进行水合，以实现所需的互动。
1条答案
按热度按时间5vf7fwbs1#
我认为大多数人忽略了这些新的服务器组件/客户端组件，你的目标之一应该是将客户端组件移到树中尽可能低的位置。
这样做可以减少客户端的JavaScript，并保持对服务器的大量依赖。
https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#moving-client-components-down-the-tree
在这个答案中有一个很好的例子，说明如何 Package 交互式客户端组件并在布局中使用它们，而不将布局标记为客户端组件：Does a client layout make everything client? If so, how to add client interactivities to it while keeping it a server component?
从文档中，您还可以看到如何使用子 prop 在客户端组件中使用服务器组件-因为您可能无法直接在客户端组件中导入它：https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props