DEV Community
·
理解 Next.js 13 中的 "use client" 指令
💡
原文英文，约400词，阅读约需2分钟。
📝
内容提要
Next.js 13引入了“use client”指令，允许在客户端上渲染组件，以实现客户端交互性。该指令放置在文件顶部，并适用于其中的所有组件。建议有选择地使用它，以便在享受服务器端渲染的同时创建交互式Web应用程序。
🎯
关键要点
- Next.js 13引入了新的app目录，组件默认作为服务器组件渲染。
- 服务器组件无法访问浏览器API和事件监听器，因此需要使用'use client'指令。
- 需要与浏览器交互的组件（如处理用户事件）必须标记为客户端组件。
- useState、useEffect等Hooks只能在客户端组件中使用。
- 'use client'指令必须放在文件顶部，所有组件都将成为客户端组件。
- 建议有选择地使用'use client'，因为服务器组件在性能和数据获取上更高效。
- 'use client'指令使开发者能够利用React的客户端特性，同时享受服务器端渲染的性能优势。
🏷️
标签
➡️
