一种正在改变我们对用户界面（UIS）的思考方式的技术正在通过API发送UI，也称为服务器驱动的UIS。这种方法提供了一种新的活力和灵活性，从而改变了UI开发的传统范式。
服务器驱动的UI不仅是理论概念；它们是由科技行业中一些知名人士实施的。例如
但是服务器驱动的UI到底是什么？它们如何工作，为什么它们在现代JavaScript开发中变得如此重要？这篇博客文章旨在回答这些问题，并深入了解服务器驱动的UI，它们的好处以及如何在自己的项目中实施它们。
了解服务器驱动的UIS
服务器驱动的UIS代表了UI开发的新方法。他们提供了一种动态而灵活的方式，可以在服务器上生成UI并通过API将其发送给客户端。这种方法可以提供更快的迭代和更个性化的用户体验。
虽然需要考虑挑战，例如App Store指南和离线用户体验管理，但服务器驱动的UI为UI开发的未来提供了令人兴奋的方向。
相比之下，服务器驱动的UI是在服务器上动态生成的，并通过API发送到客户端。服务器发送UI的JSON表示形式，然后客户端呈现。这意味着可以在服务器端更新UI，而无需对客户端进行任何更改。
UI变得动态且灵活，能够根据用户行为，A/B测试结果或新功能推出等各种因素进行实时更改。例如，Builder.io在其框架SDK中使用此方法，提供可以接受JSON作为视觉构建的输入和渲染设计的组件：
import { BuilderComponent } from "@builder.io/react";
export default async function MyPage({ params }) {
const builderJSON = await builder
// Get the page content JSON from Builder with the specified options
.get("page", {
userAttributes: {
// Use the page path specified in the URL to fetch the content
urlPath: "/" + (params?.page?.join("/") || ""),
},
})
return (
<>
<YourHeader />
<BuilderComponent content={builderJSON} model="page" />
<YourFooter />
</>
);
}
这种方法比传统的UI开发具有多个优势。首先，它允许更快的迭代，因为可以在服务器端进行更改并立即在客户端上反射。它还使后端开发人员能够为前端开发做出贡献，因为他们可以定义服务器上的UI结构和行为。
但是，服务器驱动的UI并非没有挑战。他们需要一种关于UI开发的不同思考方式，并且需要考虑技术考虑，例如如何处理动作和保持流畅的用户体验。但是，通过仔细的计划和实施，可以克服这些挑战。
服务器驱动的UI在Instagram中的作用
Instagram对服务器驱动的UIS的采用提供了令人信服的案例研究，以实现这种创新方法。这家社交媒体巨头开发了一种称为“块”的技术，该技术利用了服务器驱动的UI的概念向其用户提供动态内容和更新。
CEO @ Builder.io和Yaser Alkayale，工程师 @ Instagram/Meta进行了关于通过API发送UIS的对话：
在Instagram的实现中，服务器向客户端发送类似树的结构。每个块代表UI的一部分，并包含有关渲染的组件以及将哪些组件传递给该组件的信息。然后，客户端穿越此树结构，渲染由块指定的组件。
这种方法允许Instagram立即对UI进行更新，而无需推动应用程序的新版本。例如，如果在特定的UI组件中找到错误，则服务器可以简单地停止发送渲染该组件的块，从而有效地为所有用户修复错误。
此外，服务器驱动的UIS已启用Instagram，以更快地迭代其产品。产品团队无需等待发布新的应用程序版本，而是可以对服务器上的UI进行更改，并立即看到应用程序中反映的这些更改。这导致了更敏捷和响应迅速的产品开发过程。
服务器驱动的UIS的好处
采用服务器驱动的UI带来了许多好处，可以显着增强开发过程和最终用户体验。
- 立即进行错误修复和更快的迭代：正如Instagram用例所证明的那样，最重要的优势之一是能够立即进行错误修复和更快的迭代。可以在服务器端进行UI的更改并立即在客户端进行反映，而无需用户更新其应用程序或开发人员浏览冗长的应用商店评论过程。
- 后端开发人员为前端开发做出了贡献：服务器驱动的UIS也模糊了前端和后端开发之间的界限。后端开发人员可以定义服务器上的UI结构和行为，从而使他们可以更直接地为前端开发过程做出贡献。这可以导致更有效地利用资源和更具凝聚力的开发团队。
- 动态和个性化的用户体验：使用服务器驱动的UIS，可以根据各种因素动态量身定制用户体验。例如，服务器可以根据用户的行为，首选项甚至A/B测试结果发送不同的UI。这可能会导致更具个性化和吸引人的用户体验。
- 降低客户端复杂性：通过将大部分UI逻辑移至服务器，服务器驱动的UI也可以降低客户端的复杂性。这可以使客户更轻，更快，从而提高性能并获得更顺畅的用户体验。
构建服务器驱动的UIS：实用指南
构建服务器驱动的UI一开始似乎令人生畏，但是有了清楚地了解该过程和一些实际步骤，它可以是一项可管理且有意义的努力。这是有关如何构建服务器驱动UIS的分步指南：
- 创建树结构：构建服务器驱动的UI的第一步是创建代表您的UI的树状结构。树中的每个节点都对应于UI组件，并包含有关渲染的组件以及将哪些组件传递给该组件的信息。
- 处理操作：需要在服务器驱动的UI中处理诸如用户交互之类的操作。这可以通过在将请求发送到服务器的组件中包括在内的操作处理程序来完成。然后，服务器可以根据操作使用新的UI树进行响应。
- 使用JSON格式：UI树通常以JSON格式表示，该格式可以轻松地通过API发送并由客户端解析。
- 实现渲染引擎：在客户端，您需要一个可以穿越UI树并渲染的渲染引擎，如树所指定的。
-
测试和迭代：与任何开发过程一样，测试和迭代是关键。确保彻底测试您的服务器驱动的UI并根据您的发现进行改进。
请记住，构建服务器驱动的UI需要与传统UI开发的思维方式转变。这不仅是关于编码的，而且还关乎可以通过服务器动态生成和更新的方式来架构UI。
导航服务器驱动的UIS的挑战
当服务器驱动的UI为UI开发打开新的可能性时，他们还引入了开发人员需要注意的新考虑：
- App Store指南：应用商店的指南需要遵循。重要的是要确保使用服务器驱动的UIS与这些准则保持一致。提交应用程序进行审查时，您的UI方法透明度可以帮助避免任何潜在的问题。
- 离线用户体验：由于服务器驱动的UIS依赖服务器通信，因此在离线可能是一个挑战时管理用户体验。即使没有网络连接，也可以实施诸如缓存之类的策略也可以帮助保持一致的用户体验。
- 性能注意事项：虽然服务器驱动的UI提供动态功能，但可能会牢记性能注意事项。有效的网络请求和优化的渲染技术可以帮助保持流畅的用户体验。
- 添加的复杂性：实现服务器驱动的UI可以为开发过程添加一层复杂性，因为UI管理在服务器和客户端端都发生。但是，通过结构良好的方法和清晰的责任分离，可以有效地管理这种复杂性。
尽管这些考虑因素提出了自己的挑战，但它们也提供了解决问题和创新的机会。通过周到的计划和执行，服务器驱动的UI可以是您开发工具包的宝贵补充。
结论
通过API或服务器驱动的UIS发送UIS代表UI开发的景观的重大变化。通过将大部分UI逻辑移至服务器，此方法提供了重塑行业的动力和灵活性。
从直接的错误修复和更快的迭代中，使后端开发人员能够为前端开发做出贡献，服务器驱动的UI带来了许多好处。它们还允许更多个性化和引人入胜的用户体验，并可以降低客户的复杂性以提高性能。
虽然需要挑战，例如App Store指南和管理离线经验，但可以通过仔细的计划和战略方法有效地解决这些问题。
在高级JavaScript开发的世界中，服务器驱动的UI不仅是一个理论概念，而且是Instagram等主要平台采用的一种实用方法。随着我们继续推动UI开发中可能的界限，服务器驱动的UI为未来提供了令人兴奋的方向。
通过您的组件在视觉上构建
Builder.io是一个无头的CMS，可让您在现有网站内使用your components的drag and drop。
// Dynamically render your components
export function MyPage({ json }) {
return <BuilderComponent content={json} />
}
registerComponents([MyHero, MyProducts])