我正在 Next.js 中开发一个小型应用程序，但我还没有完全理解客户端与服务器端渲染的情况。
我一直在工作这个伟大的指南 https://www.misha.wtf/blog/supabase-auth-next-13-pkce关于使用 Supabase 设置 NextJS。
根据Next.js 文档 https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive:
一旦在文件中定义了“use client”，导入到其中的所有其他模块（包括子组件）都被视为客户端包的一部分
所以如果我使用的是AuthProvider包装应用程序（如指南中所示），但是AuthProvider被标记"use client"，我想知道是否{children}布局中的内容也自动成为客户端捆绑包的一部分。
我的猜测是“不”，因为他们不是AuthProvider，就在 ReactElements （或其他东西）附近，但我很感激有人为我确认和澄清术语。
// AuthProvider.tsx
"use client";
...
// layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<AuthProvider>
{children}
</AuthProvider>
</body>
</html>
);
}
Thanks!
您不能在客户端组件主体中调用服务器组件，但将其作为其一部分传递是完全可以的。props, children是一种可能性，正如您可以在doc https://nextjs.org/docs/getting-started/react-essentials#nesting-server-components-inside-client-components.
例如，在下面的代码中，因为所有内容都是直接在客户端组件主体中调用的，所以只能有客户端组件（注意注释）：
'use client'
// This pattern will **not** work!
// You cannot import a Server Component into a Client Component.
import ExampleServerComponent from './example-server-component'
export default function ExampleClientComponent() {
const [count, setCount] = useState(0)
return (
<>
<button onClick={() => setCount(count + 1)}>{count}</button>
<ExampleServerComponent />
</>
)
}
但是，如上所述，您可以将服务器组件传递给客户端组件，作为其组件的一部分。props:
'use client'
import { useState } from 'react'
export default function ExampleClientComponent({ children }) {
const [count, setCount] = useState(0)
return (
<>
<button onClick={() => setCount(count + 1)}>{count}</button>
{children}
</>
)
}
// This pattern works:
// You can pass a Server Component as a child or prop of a
// Client Component.
import ExampleClientComponent from './example-client-component'
import ExampleServerComponent from './example-server-component'
// Pages in Next.js are Server Components by default
export default function Page() {
return (
<ExampleClientComponent>
<ExampleServerComponent />
</ExampleClientComponent>
)
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
