getServerSide 在下一个 13 中的替代方案？答案

【问题标题】：getServerSide alternative in next 13?getServerSide 在下一个 13 中的替代方案？
【发布时间】：2023-02-25 07:35:06
【问题描述】：

我有一个组件（页面），它使用“使用客户端”，在呈现此页面之前，我想从服务器获取一些内容并在某些情况下重定向。我怎么做？在下一个 < 13 中，我将只使用 getServerSideProps，但在下一个 13 中我将如何处理它。

所以我尝试在其中使用带有异步功能的useEffect

useEffect(() => {
    async function getData() {
      const res = await fetch(...);
      const data = await res.json();
      
      if (data is incorrect) redirect(...)

      // rest of the code that runs after condition
    }
}, [])

【问题讨论】：

该组件应该是客户端组件吧？你可以使用useRouter。

标签： next.js next

【解决方案1】：

在 Next 13 app 文件夹中，一个在“使用客户端”注释的文件中声明的组件在客户端（浏览器）执行，并且像经典的 React 组件一样工作：您可以使用一些挂钩和管理用户交互。

要在服务器端执行一些代码，您必须创建一个服务器组件（在没有“使用客户端”的文件中声明）。服务器组件是异步的，不能使用挂钩。

因此，在您的情况下，您可以只创建一个服务器页面组件来获取和显示您的数据。

但是如果你需要与用户交互（例如使用 Hook）。您可以简单地创建一个服务器页面组件来获取您的数据并显示一个与用户交互的客户端组件。通过 props 传递数据。

请注意，您可以将数据从服务器组件传递到客户端组件（具有某些日期类型限制），但不能以其他方式传递。

Nb：重定向功能可以在服务器组件上使用以进行重定向。对于客户端，您可以使用 useRouter Hook。

【讨论】：