Next.js 是否始终要求“使用客户端”才能使用钩子

Question

我想知道在 Next.js 中使用 Redux 的唯一正确方法是否是添加'use client'到每个使用 ? 的页面中useSelector？

当我不添加时'use client'，我收到此错误：

- error node_modules\react-redux\lib\components\Context.js (12:44) @ getContext
- error TypeError: (0 , _react.createContext) is not a function
    at Home (./app/page.js:39:81)
    at stringify (<anonymous>)

我认为使用'use client'会增加客户端执行的代码量，从而导致更糟糕的页面加载时间。

我的想法是使用 Next.js 创建一个静态的 Frontpage，但如果登录，将显示一个仪表板按钮，只需检查带有登录令牌的 Redux 状态是否为空。

我是 Next.js 的新手。

Answer 1

要包含useSelector在组件中，您必须添加"use client". 这是因为，对于服务器组件，其想法是不发送来自它的任何 JavaScript。因此，为了使您的钩子代码能够进入浏览器，您需要一个客户端组件。没关系，正如 Vercel 的 Lee Robinson所说：

客户端组件不是取消选择，也不是逃避。您可以将服务器组件视为现有模型的补充。我理解想要在很多事情上使用服务器组件的情绪（不错！），但在某些事情上使用客户端组件也是完全可以的。

此外，即使是客户端组件也会首先使用 Next.js 在服务器上呈现。因此，想要超越就像想要仅与 HTML 进行交互一样，浏览器本身不知道如何做到这一点。