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的客户端特性，同时享受服务器端渲染的性能优势。
❓
延伸问答
Next.js 13中的'use client'指令有什么作用？
它允许在客户端渲染组件，以实现客户端交互性。
为什么服务器组件不能使用浏览器API？
因为服务器组件是在服务器上渲染的，无法访问客户端特性。
如何在组件中使用'use client'指令？
将'use client'放在文件顶部，所有组件将成为客户端组件。
使用'use client'指令有什么建议？
建议有选择地使用，以保持服务器组件的性能优势。
在客户端组件中可以使用哪些Hooks？
可以使用useState、useEffect等Hooks。
为什么要在Next.js中平衡服务器端和客户端渲染？
这样可以利用服务器端渲染的性能优势，同时实现客户端的交互性。
🏷️
