原文：https://addyosmani.com/blog/r...译文：阳线本周，React团队发布了零封装体积的React服务器组件（ServerComponents），旨在使用一个服务器现代用户体验驱动的心智模型。这与组件的服务器端渲染(SSR)有很大不同，并且可能导致客户端JavaScript包明显更小。我对这项工作的发展方向感到非常兴奋，虽然它还没有准备好用于生产，但值得关注。我强烈建议阅读RFC或观看Dan和Lauren的谈话以了解更多详细信息。服务器端呈现限制今天客户端JavaScript的服务器端呈现可能不是最佳的。您的组件的JavaScript代码在服务器上呈现为HTML字符串。此HTML被传递到浏览器，这可能会导致快速的FirstContentfulPaint或LargestContentfulPaint。然而，JavaScript代码仍然需要下载和解析以实现交互，通常是通过水化步骤。服务器端呈现通常用于初始页面加载，因此您不太可能在水合作用后再次使用它。注意：虽然SSR确实可以用于构建仅使用服务器端渲染(SSR)的React应用程序，完全避免在客户端进行水合作用，但界面上的大量交互通常需要跳出React。由服务器端组件启用的混合模型将允许在每个组件的基础上决定是SSR/CSR，还是两者兼而有之。使用React服务器端组件，我们的组件可以定期重新获取。当新数据可用时，带有组件的应用程序可以在服务器上运行，从而限制需要发送到客户端的代码量。[RFC]：开发者需要不断地选择使用第三方包。使用包来渲染markdown或格式化日期对我们开发人员来说很方便，但它会增加代码大小并影响用户性能。服务器端组件React的新服务器端组件补充了服务器端渲染，可以在不添加到JavaScript捆绑结果的情况下渲染为中间抽象格式。这既允许在不丢失状态的情况下将服务器树与客户端树合并，又可以扩展到更多组件。服务器端组件不能替代SSR。当配对在一起时，它们可以以中间格式快速呈现，然后由服务器端呈现基础结构呈现为HTML，从而使早期呈现更快。我们对服务器组件生成的客户端组件进行SSR，类似于SSR与其他数据获取机制的使用方式。然而，这一次，JavaScript包将小得多。早期的探索表明，服务器端组件在减少包大小(-18-29%)方面特别有效，但一旦完成进一步的基础设施工作，React团队将更清楚地了解实际收益。[RFC]：如果我们将上面的示例迁移到服务器端组件，我们可以为我们的功能使用完全相同的代码，但避免将其发送到客户端——节省超过240K的代码（在未压缩的情况下）.自动代码拆分通过使用代码拆分仅向用户提供他们需要的代码被认为是最佳实践。这允许您将您的应用程序分解成更小的包，需要更少的代码发送给客户端。在服务器端组件出现之前，人们会手动使用React.lazy()来定义“拆分点”，或者依靠元框架设置的启发式方法，例如路由/页面来创建新块。代码拆分的一些挑战是：在框架之外（例如Next.js），您通常必须手动解决这个优化问题，用动态导入替换导入语句。可能会延迟应用程序开始加载组件的时间，影响用户体验。服务器端组件引入了自动代码拆分，将客户端组件中的所有正常导入视为可能的代码拆分点。它们还允许开发人员更早地（在服务器上）选择要使用的组件，从而允许客户端在渲染过程中更早地获取它。服务器端组件会取代Next.js的SSR吗？不，它们完全不同。随着研究和实验的不断进行，最初采用的服务器端组件实际上会用Next.js等框架进行实验。DanAbramov很好地解释了Next.jsSSR和服务器端组件之间的区别：服务器端组件的代码永远不会发送到客户端。在许多使用React的SSR实现中，组件代码无论如何都以JavaScript包的形式发送到客户端。这可能会延迟交互时间。服务器端组件可以从树中的任何位置访问后端。使用Next.js时，您习惯于通过getServerProps()访问后端，其局限性在于它仅适用于顶级页面。某些npm组件不能这样做。可以重新获取服务器端组件，同时在树中维护客户端状态。这是因为主要的传输机制比纯HTML丰富得多，允许在不破坏内部状态（例如搜索输入文本、焦点、文本选择）的情况下重新请求服务器呈现的部分（例如搜索结果列表）。服务器端组件的一些早期集成工作将使用webpack插件完成，该插件：定位所有客户端组件在ID=>分块URL之间创建映射。一个Node.js加载器，用对它们的引用替换客户端组件的导入（即不会出现在纯服务器端组件的捆绑结果中）。有些工作需要更深入的集成（例如与路由等组件），这就是为什么让它与像Next.js这样的框架一起工作可能很有价值。正如Dan所指出的，这项工作的目标之一是让框架变得更好。深入研究并欢迎来自React团队的反馈要了解有关此新功能的更多信息，请观看Dan和Lauren的演讲，阅读RFC，并查看服务器端组件的演示以试用此新功能。感谢SebastianMarkb?ge、LaurenTan、JosephSavona和DanAbramov在服务器端组件方面所做的工作。结束
