组件：服务器端与客户端

2021年建立网站通常涉及组件驱动的方法。诸如React和Vue之类的框架占主导地位，而其他框架则努力突出。但是，这种基于组件的开发不是最近的发明。

可重复使用的代码片段的概念已经存在多年。用JavaScript编写并由浏览器渲染的客户端组件（如Web组件，React和Vue中使用的）是现代的迭代。相反，在到达浏览器之前，将服务器端组件编译为服务器上的HTML；自网络初期以来，他们就已经存在，通常称为部分或模板。两者仍然相关。

渲染机制

核心差异在于渲染：服务器组件由服务器渲染，而客户端组件由浏览器渲染。

服务器端渲染可以是实时的（对每个客户端请求响应）或预渲染（使用构建过程来生成Jamstack方法的静态HTML）。无论方法如何，浏览器都会收到HTML。

使用JavaScript实现的客户端组件由浏览器渲染。虽然服务器可以意识到它们，但其参与取决于框架。 Web组件利用阴影DOM进行封装，而诸如React和Vue之类的框架内部管理DOM操作。

互动和性能

服务器组件纯粹是交付时HTML的，需要单独的JavaScript才能进行交互。这种关注点的分离为代码组织提供了优势，并可能减少了浏览器负载，但增加了复杂性。

客户端组件通常将标记和交互性结合在一起，简化开发，但可能会影响初始负载时间。但是，框架通常采用诸如预渲染（Gatsby，Next.js，nuxt.js）之类的技术来减轻这种情况，从而导致更快的后续页面加载。

由于完整的HTML输送，服务器端组件通常提供更好的初始性能，而客户端组件虽然最初可能会较慢，但可以在框架内的后续交互中获得卓越的性能。

语言和样式

服务器组件可以用各种服务器端语言编写，通常与应用程序的逻辑匹配。客户端组件主要使用JavaScript，尽管服务器端JavaScript Runtimes（如Node.js）在某些情况下允许语言一致性。

造型服务器端组件需要额外的努力来连接样式表，尽管诸如Tailwind CSS之类的工具简化了这一点。客户端组件库通常包括内置的CSS支持，但组织至关重要。

混合未来

这两种方法都普遍优势。混合方法可能会占上风，从而利用两者的优势。服务器端渲染优化了性能和SEO，而客户端框架可以增强交互性和开发人员体验。

三个关键趋势指向这种混合未来：

1. 高级JavaScript框架框架：诸如Gatsby，Next.js和Nuxt.js之类的工具使用预渲染来生成静态HTML，改善了初始加载时间，然后“水合”以增加交互性。

2. 烘焙客户端的预渲染：框架越来越多地集成了服务器端渲染功能，简化了流程并有可能降低对其他工具的依赖。 Svelte是这一趋势的显着例子。

3. 服务器端组件的交互性： Hotwire之类的框架旨在增强服务器端组件与最小JavaScript的交互性，并有可能恢复全堆栈整体式框架的兴趣。

网络开发的未来可能涉及这些方法的融合，平衡性能，开发人员的经验以及框架的持续发展。

以上是组件：服务器端与客户端的详细内容。更多信息请关注PHP中文网其他相关文章！