我正在 Next.js 中开发一个小型应用程序，但我还没有完全理解客户端渲染和服务器端渲染。
我一直在按照这个关于使用 Supabase 设置 NextJS 的优秀指南进行工作。
根据Next.js 文档：
一旦在文件中定义了“use client”，导入到其中的所有其他模块（包括子组件）都被视为客户端包的一部分
因此，如果我使用 anAuthProvider来包装应用程序（如指南中所示），但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>
);
}
谢谢！
您不能在客户端组件主体中调用服务器组件，但将其作为其一部分传递是完全可以的props，这是您可以在文档children中阅读的一种可能性。
例如，在下面的代码中，因为所有内容都是直接在客户端组件主体中调用的，所以只能有客户端组件（注意注释）：
'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>
)
}
| 归档时间： |
|
| 查看次数： |
2149 次 |
| 最近记录： |