links: React、NestJS、Server Components
原文地址：5 Misconceptions about React Server Components
误解一：应优先选择服务器组件，而客户端组件应该节俭使用
- 虽然服务器组件提供了许多好处，但并非适用于所有场景，特别是那些需要交互性的场景。React 服务器组件是一种新型的 React 组件，专门在服务器上运行，从服务器上获取数据并完全在服务器上进行渲染，以提高性能
- 客户端组件对于需要客户端交互、状态管理或浏览器API的功能实现至关重要
- 建议的做法是尽量将客户端组件放置在组件树中尽可能低的位置，理想情况下使它们成为叶子组件
Server Components 的引入并不意味着它们本质上比 Client Components 更好，也不意味着它们应该始终被优先考虑。在良好架构的 React 应用程序中，两者都有其位置。Client Components 对于创建交互式、动态用户界面仍然至关重要，在适当的情况下使用它们不仅可以接受，而且通常是必要的。
误解二：use client 将组件标记为客户端组件，而 use server 将组件标记为服务器组件
use client确实为客户端组件标记了一个边界- 对于服务器组件，没有
use server指令。服务器组件是NextJS应用程序路由器和 React 服务器组件中的默认设置。
确实存在一个
use server指令，但它用于不同的目的：标记服务器操作，而不是声明服务器组件。
误解三：服务器组件总是在服务器上呈现，客户端组件总是在浏览器中呈现
- 服务器组件确实在服务器上呈现。
- 客户端组件比许多人意识到的更加灵活多样。它们可以在服务器端（用于初始页面加载）和客户端上进行渲染。
- 关键区别在于它们的功能：客户端组件可以使用客户端功能，如状态、Effect、Event事件等，而客户端组件则不能。
仅依赖客户端 JavaScript 渲染网页可能带来重大缺点。用户最初会看到空白网页，直到浏览器下载、处理和执行 JavaScript代码。导致内容可见性延迟。这种延迟可能会使网站感觉缓慢和不想赢，特别是在较慢的网络或性能较弱的设备上。此外，它可能会阻碍搜索引擎索引，影响网站在搜索结果中的可见性。为了优化这一点，可以在服务器上呈现客户端组件以进行出示页面加载。这种预渲染的 HTML允许用户立即看到内容，同时 React 在后台工作，使组件完全互动，而用户看不到任何可见变化。这种方法显著提高了应用程序的感知加载速度和实际性能。
误解四：每个具有交互性的组件都需要自己的 use client 指令
- 只需要在客户端功能的最顶层组件文件的顶部添加
use client， - 该文件中定义的所有组件都会自动成为客户端组件
- 这包括文件中的嵌套组件
养成使用
only-server的习惯，可以防止敏感信息泄露。并确保组件按预期运行。
误解五：服务器组件不能嵌套在客户端组件内部
- 虽然不能直接将服务器组件嵌套在客户端组件中，但可以将服务器组件作为属性传递给客户端组件。这种方式可以实现客户端和服务器组件的无缝集成、优化性能和互动性
- 一种常见的模式被称为“孩子作为道具”模式。简单例子
// ServerComponent.js
function ServerComponent() {
return <h1>Hello from the server</h1>;
}
// ClientComponent.js
'use client'
function ClientComponent({ children }) {
return (
<div>
<p>This is a client component</p>
{children}
</div>
);
}
// Usage
function App() {
return (
<ClientComponent>
<ServerComponent />
</ClientComponent>
);
}这种灵活性能够通过将数据获取和繁重计算保留在服务器上，同时在需要时提供交互性。从而创建更高效的应用程序。