Next.js 服务器组件中 useState 的替代方案？

Question

Next.js 服务器组件中 useState 的替代方案？

Abd*_*lah 5 javascript typescript server-side-rendering next.js tailwind-css

鉴于我有一个静态站点（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>
    );
}

Run Code Online (Sandbox Code Playgroud)

鉴于上面的代码，我只是将 dark 类应用到我的容器 div 中。深色模式在导航栏中切换。

在 Next.js 13 中，我利用layout.tsx 中的“use client”关键字将整个布局转换为客户端组件。然而，考虑到我对默认启用深色模式的偏好，我现在认识到将整个布局作为客户端组件可能不是最佳方法。因此，我想将站点转换为服务器端组件，以便稍后可以进行水合以实现所需的交互性。

Answer 1

Pou*_*sen 0

我认为大多数人忽视了这些新的服务器组件/客户端组件，您的目标之一应该是将客户端组件移到树中尽可能低的位置。

这样做可以减少客户端 JavaScript 并保持对服务器的大量依赖。

https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#moving-client-components-down-the-tree

这个答案中有一个很好的例子，说明如何包装交互式客户端组件并在布局中使用它们，而不将布局标记为客户端组件：客户端布局是否使所有内容都成为客户端？如果是这样，如何在保留其服务器组件的同时向其添加客户端交互性？

从文档中，您还可以了解如何使用子属性在客户端组件中使用服务器组件 - 因为您可能无法直接将其导入客户端组件中： https ://nextjs.org/docs/app/building-your-application/rendering /composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props

归档时间：	2 年，6 月前
查看次数：	2449 次
最近记录：	1 年，11 月前