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

t0ybt7op 于 2023-06-22 发布在其他

关注(0)|答案(2)|浏览(227)

我有一个Next App。我使用app文件夹和Next Auth库。为了使每个页面都可以访问会话，我将整个应用程序 Package 在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>
    )
}

一些受保护页面

'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>
    )
}

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

next.js

来源：https://stackoverflow.com/questions/76455367/is-it-normal-that-all-components-in-next-js-are-client-components

2条答案

按热度按时间

9wbgstp71#

不，并不是每个组件都必须是客户端组件。您可以创建一个 Package 组件，它是一个接收子组件的客户端组件。服务器组件和客户端组件都可以作为子组件传递给客户端组件。

Package 组件示例

"use client";

import NoAuthComponent from "components/NoAuthComponent";

interface Props extends React.PropsWithChildren {}

// if the no auth view was provided as a prop rather then
// imported you could also make it a server component
export default function ProtectedView({ children }: Props): JSX.Element {
  const session = useSession();
  if (session?.status !== "authenticated") return <NoAuthComponent />;
  return <>{children}</>;
}

用法示例

import "server-only";

import ProtectedView from "components/ProtectedView";
import MyServerComponent from "components/MyServerComponent";

export default async function MyPage(): Promise<JSX.Element> {
  const response = await fetch("...");
  const data = await response.json();
  return (
    <ProtectedView>
      <MyServerComponent data={data} />
    </ProtectedView>
  );
}

有关组合、嵌套和使用客户端和服务器组件的更多信息可以在官方文档中找到。

赞(0）回复(0）举报 2023-06-22

whlutmcx2#

Next.js中的所有组件都是客户端组件正常吗？
默认情况下，app文件夹下的每个组件都是服务器组件，这意味着它在服务器端呈现，而它的代码则留在服务器端。
关于use client
现在所有的页面和组件都呈现在客户端上，这正常吗？
您可以在客户端组件中混合服务器组件作为其子组件。

<ClientComponent>
  <ServerComponent />
</ClientComponent>

有关详细信息，请阅读this article on dev.to。
您可能也有兴趣阅读this blog on medium。

赞(0）回复(0）举报 2023-06-22

我来回答

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

2条答案

Package 组件示例

用法示例

相关问题

热门标签

最新问答