Next.js 中的所有组件都是客户端组件，这正常吗？

Question

Next.js 中的所有组件都是客户端组件，这正常吗？

que*_*ton 6 typescript reactjs server-side-rendering next.js next-auth

我有一个下一个应用程序。我使用应用程序文件夹和 Next Auth 库。为了使每个页面都可以访问会话，我将整个应用程序包装在SessionProvider. 但由于它是useContext在幕后，我必须'use client'在各处添加该指令。这导致所有页面都是客户端，因为它们使用useSession. 所有页面组件（按钮、输入）也变成了客户端。

app/layout.tsx

const RootLayout = ({ session, children }: { session: Session; children: ReactNode }) => {
    return (
        <SessionProvider session={session}>
                <html lang={`eng`} 
                    <head>
                    </head>
                    <body>
                        {children}
                    </body>
                </html>
        </SessionProvider>
    )
}

Run Code Online (Sandbox Code Playgroud)

一些受保护的页面

'use client';

import {useSession} from "next-auth/react";

export default function ProtectedPage() {
    const {data, status} = useSession()


    return (
                <div>
                    {status === "authenticated" ? <div>data.name</div> : null}
                </div>
    )
}

Run Code Online (Sandbox Code Playgroud)

现在所有页面和组件都在客户端呈现，这是否正常？Next Auth 文档建议将所有内容包装在提供程序中，但 Next.js 的主要功能（即 SSR）不再起作用

Answer 1

Bho*_*yar 3

Next.js 中的所有组件都是客户端组件，这正常吗？

默认情况下，app 文件夹下的每个组件都是服务器组件，这意味着它在服务器端呈现，并且其代码保留在服务器端。

和use client

现在所有页面和组件都在客户端呈现，这是否正常？

您可以将服务器组件混合在客户端组件中作为其子组件。

<ClientComponent>
  <ServerComponent />
</ClientComponent>

Run Code Online (Sandbox Code Playgroud)

有关更多详细信息，请阅读dev.to 上的这篇文章。

您可能还有兴趣阅读Medium 上的这篇博客。

归档时间：	2 年，7 月前
查看次数：	4221 次
最近记录：	2 年，7 月前