Open Source Daily Issue 1086: React DOM Testing Tool: 'react-testing-library'
内容提要
开源日报推荐了《react-testing-library》和《It’s 2024, you should be using React Server Components already》两个开源项目和英文文章。该文章介绍了React服务器组件（RSC）的优势，包括更快的数据获取、更快的UI和更好的用户体验、更简单的UI代码。RSC在服务器上执行，可以简化数据获取逻辑，提高性能和用户体验，减少UI代码复杂性。
延伸解读
RSC 与 SSR 的本质区别
文章明确指出 React 服务器组件（RSC）与服务器端渲染（SSR）不是同一概念。SSR 在服务器上渲染整个应用，然后将结果发送到客户端进行水合；而 RSC 只针对单个组件进行优化，在更细粒度上提升渲染效率。理解这一区别有助于开发者正确选用技术，避免混淆。
RSC 如何简化数据获取
使用 RSC 时，组件可以直接在服务器上执行数据获取逻辑，无需创建内部 API 端点，也避免了 CORS 问题。同时，数据获取的错误处理不再与 UI 组件耦合，且可以安全地查询数据库或文件等数据源。这减少了额外代码，提升了开发效率与安全性。
性能提升的前提条件
文章强调，RSC 带来的性能优势并非自动获得，而是需要正确使用。如果使用不当，其性能可能不如精心优化的客户端组件。因此，开发者应确保将合适的组件（如无交互、无状态的组件）放在服务器端，并合理划分客户端组件，才能实现更快的 UI 和更好的用户体验。
对代码结构的影响
采用 RSC 后，开发者可以将数据获取和处理等非 UI 逻辑移至服务器端，从而简化客户端组件的逻辑，减小客户端包体积。甚至可以将无需动态行为的整个 UI 组件（如页脚）移至服务器渲染，显著降低 UI 代码库的复杂度，使代码结构更清晰。
Q&A
React Server Components 和 SSR 有什么区别？
RSC 和 SSR 不是一回事。SSR 专注于在服务器上渲染整个应用，然后将结果发送到客户端进行 hydration；而 RSC 只关注单个组件的优化，在更细粒度上优化渲染过程。
使用 React Server Components 进行数据获取有什么好处？
使用 RSC 进行数据获取更快更简单：可以直接在组件中查询任何数据源（如数据库、外部 API 或本地文件），无需创建内部 API 端点，避免 CORS 问题，减少错误处理逻辑与 UI 组件的耦合，并且数据获取逻辑不会暴露给用户。
React Server Components 如何提升 UI 性能和用户体验？
RSC 在服务器上渲染，浏览器无需执行 JavaScript 来解析代码、创建 HTML 元素和更新 DOM，从而将渲染负担转移到服务器。这可以加快 UI 加载速度，让用户更早看到内容，改善首次内容绘制时间，提升用户体验。
React Server Components 如何简化 UI 代码？
RSC 允许将数据获取和数据处理等非 UI 逻辑从客户端组件移到服务器，客户端组件只负责 UI 表示。这减少了客户端组件的大小和发送到客户端的 bundle 体积，甚至可以移除不需要动态行为的整个 UI 组件（如页脚），从而显著简化代码库。
React Server Components 是如何工作的？
RSC 在服务器上执行。框架（如 Next.js）会识别页面中的服务器组件，为每个组件加载服务器版 React 并执行，输出 HTML。这些 HTML 被放入 React Server Component Payload 中发送到浏览器，其中还包含客户端组件的占位符以及从服务器组件传递到客户端组件的 props（如果有）。
为什么开发者应该开始使用 React Server Components？
使用 RSC 有三个主要理由：1. 数据获取更快更简便；2. 更快的 UI 和更好的用户体验；3. UI 代码更简单。此外，RSC 还能带来更好的开发工作流程，提升数据处理的安全性和效率。
