如何正确使用Next JS 13服务器组件

iezvtpos 于 2023-08-04 发布在其他

关注(0)|答案(1)|浏览(165)

我最近一直在研究Next JS 13的更新，主要是每个组件在默认情况下都是服务器组件。这对我来说似乎是一件令人困惑的事情...我不知道如何正确地利用这个功能。
例如...我正在尝试在我的应用程序中设置用户身份验证和授权路径/内容。我不确定这是否重要，但我使用React Query（现在的tanstack query）来存储我的身份验证凭证，这是我所有数据库调用所需的，以确定适当的内容访问。
现在，我有一个垂直导航栏和一个内容页面，在根层布局中呈现为两个子组件。但是，我需要这些组件根据用户的登录状态呈现不同的内容（例如，在注销时显示默认的网站标签，在用户登录时显示其他导航标签）。但是我的导航和内容页面实际上包含了我的应用程序的全部内容，它们都需要知道我的用户是否登录。
因此，如果我创建一个 Package 器组件，存储应用了“使用客户端”的登录信息，并将导航和内容页面 Package 在具有“使用客户端”的父级中，那么我的整个应用程序基本上现在都呈现在客户端而不是服务器上。
我的理解是，如果一个组件作为'使用客户端'指令，那么所有的子组件都自动呈现在客户端上。我的auth父组件需要这个'use client'指令用于tanstack query / state。
我是不是误解了什么？我想我只是不明白Next JS 13做默认服务器组件的好处，而最常见的身份验证和授权用例之一几乎需要根级别的客户端组件。
请帮助澄清这一点。提前感谢！！！

next.js

来源：https://stackoverflow.com/questions/76794640/how-to-use-next-js-13-server-components-properly

1条答案

按热度按时间

cbwuti441#

this answer：
由于根布局组件正在呈现子级，因此子级树中的任何组件都可以是服务器组件
例如，你有一个像这样的layout.tsx文件：

"use client";

export default function Layout({children}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">        
      <head />
        <body>
           {children}
           <SomeGlobalComponent />
      </body>
    </html>
  )
}

字符串
默认情况下，即使在根布局中使用了"use client"指令，{children}仍然是服务器呈现的。但是，<SomeGlobalComponent />必须由服务器呈现，因为它不是子属性的一部分。

赞(0）回复(0）举报 2023-08-04

我来回答

如何正确使用Next JS 13服务器组件

1条答案

相关问题

热门标签

最新问答