为什么在 Next.js 中客户端组件会以 SSR 渲染，标记为 "use client" 的组件仍然以 SSR 渲染其 HTML？
💡
原文英文，约500词，阅读约需2分钟。
📝
内容提要
在Next.js中，服务器组件默认在服务器上渲染并发送HTML到客户端。标记为'use client'的组件在客户端运行以实现交互性。即使是客户端组件，初始HTML仍可在服务器生成以提升性能和SEO。浏览器接收HTML后，Next.js通过JavaScript进行水合，使组件具备交互性。'use client'确保交互性JavaScript仅在浏览器中执行。
🎯
关键要点
- 在Next.js中，服务器组件默认在服务器上渲染并发送HTML到客户端。
- 标记为'use client'的组件在客户端运行以实现交互性。
- 即使是客户端组件，初始HTML仍可在服务器生成以提升性能和SEO。
- 服务器生成的HTML是静态的，不具备交互性。
- 水合过程使得组件具备交互性，JavaScript在浏览器中执行。
- 服务器渲染初始HTML可以加快内容显示速度，提升用户体验。
- 预渲染HTML对SEO重要，确保搜索引擎能够抓取和索引内容。
- 标记为'use client'的组件仍会生成初始静态HTML，但交互性JavaScript仅在客户端加载。
- SSR允许客户端组件的HTML在服务器上预渲染，但在客户端水合后才具备交互性。
- 需要重新考虑动态内容的加载方式，以确保组件的行为符合预期。
➡️
