关于Next.js中使用Hook及Redux是否必须添加'use client'的疑问

嘿，我来帮你理清楚这个问题～

首先，你遇到的报错是很正常的：Next.js 13+的App Router里，组件默认是服务器组件，而Redux的useSelector、React的createContext这类API只能在客户端组件中运行——服务器组件没有浏览器环境的上下文，也不支持React客户端Hooks，所以不加'use client'就会抛出你看到的TypeError: (0 , _react.createContext) is not a function错误。

那是不是每个用到Redux的页面都必须加'use client'？其实不用一刀切。你可以把需要依赖Redux状态的UI部分抽成单独的客户端组件，给这个组件加上'use client'，然后在你的静态首页（服务器组件）里引入它就行。这样首页的大部分静态内容依然是服务器渲染/静态生成的，只有需要动态判断登录状态的小部分是客户端渲染的，既保留了静态页面的性能优势，又能实现你要的功能。

关于你担心的页面加载速度问题：'use client'确实会把组件代码打包到客户端，但只要你合理拆分组件，只把需要交互或依赖客户端状态的部分标记为客户端组件，就不会大幅增加客户端的代码体积。比如你首页的标题、介绍、静态图片这些都留在服务器组件里，只有那个仪表盘按钮是客户端组件，客户端需要加载的额外代码其实非常少，对加载速度的影响几乎可以忽略。

给你一个贴合你需求的具体实现思路：

• 新建一个客户端组件，比如DashboardButton.js，开头加上'use client'，在里面用useSelector获取Redux中的登录token，根据token是否存在决定是否渲染仪表盘按钮；
• 在你的首页page.js（无需加'use client'，保持服务器组件身份）里直接引入这个DashboardButton组件；
• 首页的其他静态内容正常编写即可。

这样你的首页依然是静态生成的，只有按钮部分会在客户端渲染并检查Redux状态，完全符合你的需求～

备注：内容来源于stack exchange，提问作者Matthias