建立网页的方法有很多种。应该把负担放在服务器上还是留给客户端？
从本质上讲，客户端渲染(CSR)类似于宜家家具-网页是在家中构建的，就在您的浏览器内。简而言之，当使用由CSR支持的网站时，您会从服务器下载一个几乎最基本的HTML文档，该文档会通过JavaScript直接在用户的浏览器中进行修饰。
这种方法的出色之处和吸引力在于其性能优化和用户体验增强。在与页面交互或在启用CSR的网站上提交表单时，用户不会触发整个页面重新加载，因为每个请求都会进行异步调用，而只会更新页面的一部分。
这有助于避免等待服务器响应，进而实现无缝导航——提高参与率并最终提高投资回报机会。事实上，CSR与另一个众所周知的缩写词SPA（单页应用程序）密切相关。由于网页是由客户端动态构建的，因此它可以卸载和加载新信息，从而创造快速且非常直观的体验。
微信和百度等知名品牌已有效运用CSR，它们就是这种模式发挥作用的原因和方式的明显例子。那么，为什么它似乎已经过时了？为什么它正逐渐被服务器端渲染(SSR)取代？好吧，这就是成都小程序开发今天要讨论的内容。
在软件开发服务这个充满活力的世界里，用户体验(UX)已成为企业成功的基石。渲染本质上是将应用程序或网站的设计代码转换为用户可交互的视觉显示的过程。这种渲染的质量直接影响网站的吸引力和互动性——最终决定访问者是留在您的平台上还是跳槽到竞争对手那里。
页面渲染速度对用户参与度有重大影响。加载时间缓慢会导致高跳出率，因为当今精通技术的消费者希望在网上浏览时能立即获得满足感。研究表明，如果页面加载时间超过三秒，53%的移动网站访问会被放弃——这凸显了快速渲染对于维持用户兴趣的重要性。
为了确保最佳性能，开发人员经常使用SSR、CSR或称为通用/同构渲染的混合方法（成都小程序开发稍后会讨论）。每种方法在SEO优化、初始加载时间、交互速度、可扩展性和可维护性等因素方面都有其优缺点。
SSR可立即查看网页，因为它会将完整填充的HTML文件从服务器发送到浏览器，但可能会影响页面交互性，直到所有JavaScript完全加载。相反，CSR在加载后可提供更快的交互速度，因为JavaScript直接在客户端浏览器中运行，但由于在等待JavaScript执行时发送了空HTML，因此初始加载时间会变慢。
结合渐进式Web应用程序(PWAs)等现代技术可以帮助优化SSR和CSR方法，使网站能够更像原生应用程序一样运行，提供离线功能并增强整体用户体验(UX)，无论网络条件如何，从而确保即使在恶劣情况下也能保留客户。
关于用户的讨论已经够多了，让成都小程序开发来谈谈渲染。
从本质上讲，SSR涉及在服务器上生成服务器渲染的html，然后再将其发送到客户端（最终用户的浏览器）。每次最终用户发出页面请求时，都会发生此服务器端渲染过程。本质上，当有人从他们的设备输入或点击您的网站URL时，每个请求的网页都已经是在全球不同地区的精英服务器上准备的完整渲染的html页面。
与人们认为这种方法可能耗费大量资源相反，服务器端渲染框架旨在简化客户端执行的操作，同时有效利用服务器的处理能力。这最大限度地减少了频繁的服务器请求，这些请求在互联网连接速度较慢的情况下可能会很麻烦。
SSR的一个根本优势在于其首次有效绘制(FMP)时间——这是一种性能指标，指的是加载html文件后关键源内容向用户显示的速度。由于预渲染页面会立即呈现，因此用户会立即专注于用户界面，从而减少由于感知到的延迟而突然跳出的可能性——这对于旨在提高客户保留率和参与率指标的高流量平台至关重要。
但等等，还有更多！对于使用CSR的Web开发人员来说，最大的麻烦之一是，由于初始页面几乎是基本框架，像百度使用的搜索引擎机器人有时无法从网页中抓取内容，正如您所预料的那样，这对SEO来说是一个死刑判决。事实上，这正是开源框架SSR越来越受欢迎的原因——它终于解决了SPA最大的麻烦之一。
乍一看，服务器似乎并不是数字生态系统中最迷人的组成部分——当开发人员沐浴在聚光灯下玩CSS动画或试验AR/VR应用程序时，服务器却是后台嗡嗡作响的一股看不见的力量。
然而，想象一下，一场精心编排的芭蕾舞表演，如果没有任何伴奏音乐，其细微差别和深度将大大减弱。这正是对服务器理解不够深入会给您的业务模式造成的空白。
SSR的运作方式很像管弦乐队指挥，负责根据访客请求演奏交响乐，在成都小程序开发的网站上挥舞指挥棒。这些代码片段有助于在浏览器屏幕到达用户设备之前，使用经过处理的服务器端渲染解决方案绘制浏览器屏幕-考虑提前完成拼图，以便最终用户减少等待时间。
SSR解决方案通过HTTP协议网络解释浏览器发出的每个请求，并将完成的html页面直接提供给用户。这减轻了解析客户端JavaScript库的需要以及处理服务器端javascript的繁琐工作。由于成都小程序开发不再依赖客户端javascript，成都小程序开发对成都小程序开发的网站或应用有了更多的控制，但这显然是有代价的。
对于小型服务器来说，服务几百个用户不成问题，但如果要服务数百万用户怎么办？请记住，一些最大的网站每天有数亿用户访问—突然之间，所有这些请求都在向成都小程序开发的服务器发出请求：“嘿，请创建一个视图。”如果只是请求信息就足以让网站瘫痪，那么呈现数百万用户的页面就是一项艰巨的任务。
CSR之所以成为Web开发人员的一种高度有效的策略，主要是因为它能够提供交互式和简化的用户体验。
理解CSR的第一步是承认所有主要操作都发生在浏览器中。与服务器端进程不同，服务器端进程在强大的服务器上进行计算，然后向浏览器提供静态HTML，而CSR利用开源JavaScript框架来支持这些引擎：例如Chrome的V8或Firefox的Spidermonkey。
是的，客户端呈现的网站的初始加载成本比服务器呈现的网站相对较高，因为它们需要下载更多资产，包括单个JavaScript文件，而不仅仅是单页文档。但请记住，这只是一次；由于信息缓存在用户的硬件上，后续导航将变得更顺畅、更快速，提供无缝的浏览体验——这正是当今急躁用户的要求！
传统上，在CSR中，数据获取是在初始JavaScript下载后通过API进行的——可以独立地异步加载和更新部分数据，而不是重新加载整个页面——与旧方法相比，这是一个重大改进。为了帮助改善整个网络内容的共享，开发人员还可以实施微信的OpenGraph协议，以便在社交媒体平台上更好地呈现内容（嘿，Django和WordPress，我正在关注你们）。
正如成都小程序开发之前提到的，有人可能会认为SEO问题是CSR的弱点，因为搜索引擎无法有效地解释JavaScript代码。然而，随着技术的进步和可重复使用的UI组件的集成，这种情况有所缓解。例如，百度bot现在能够“读取”依赖于JavaScript的类型。无论以何种标准衡量，这都不是一个完美的解决方案——JavaScript越有创意，你的网站就越有可能陷入SEO地狱。但比起几年前，现在的情况好多了。
鉴于其对本地资源（即用户的浏览器）的严重依赖，高级交互功能使CSR非常适合需要持续交互的Web应用程序，例如实时更新或动画，典型场景包括SPA、首次渲染后分析站点、具有大量产品详细选项的电子商务平台等。
对于Web开发公司来说，在SSR和CSR之间做出选择往往感觉像在迷宫中穿行。但是，成都小程序开发将尝试深入研究这两种方法的复杂性，看看成都小程序开发是否能帮助您找出最适合您的方法。
SSR相对于其竞争对手的一个不可否认的优势是它对搜索引擎爬虫具有出色的可访问性。这意味着百度bot或Bingbot可以快速索引您的内容，因为搜索引擎从服务器接收到完全呈现的页面。因此，如果您追求出色的SEO性能，那么SSR可能会令人信服地满足您的要求。
如今，用户在面对缓慢的网站时总是缺乏耐心，他们希望能够立即获得信息。使用SSR后，用户将不会再盯着空白屏幕，直到所有脚本都加载完毕（这是CSR中常见的陷阱），因为服务器会调度可供显示的HTML，从而更快地实现所谓的“首次内容绘制”。
想想那些使用低端设备或网络连接不佳的终端用户。通过将繁重的操作分离到服务器端易于呈现的组件中，而不是像CSR那样将它们完全外包给客户的机器，成都小程序开发可以确保无论设备功能如何都能获得公平的用户体验，而不会破坏他们的数据库！
无论这些优势听起来多么美好，没有任何技术是完美的——SSR也不是——因此，它在展现优点的同时，也指出了一些值得考虑的缺点：
在运营架构方面（特别是负载方面），SSR会给服务器带来额外压力，并对加载速度和成本产生深远影响。基于云的服务可以动态扩展以应对这一问题，但这也意味着您必须非常谨慎地考虑成本结构。
需要持续动态更新的网站在SSR环境中可能会遇到挑战，因为每次新的交互都需要从服务器获取新的HTML。重新加载页面会妨碍流畅的实时交互，而流畅的实时交互对于现场拍卖门户或梦幻体育游戏应用程序等网站来说至关重要。
首先，让成都小程序开发揭开客户端渲染如此吸引人的一些方面的面纱。
CSR的一个关键方面是它能够与服务器呈现的应用程序进行更动态的用户交互。由于基于事件的操作在用户浏览器中的处理速度比往返服务器的速度更快，因此访问者可以享受非常无缝和流畅的浏览体验。
将计算任务卸载到客户端的设备上而不是仅仅放在服务器上，可以降低服务器负载，从而有可能降低与维护高性能服务器相关的运营成本。
由于将计算直接转移到客户端的浏览器上，对服务器呈现页面的依赖减少了，可扩展性的复杂性（特别是在访问高峰期）可能会随着时间的推移而得到缓解，从而提供节省成本的机会，同时提高网站的稳健性。
SEO复杂性
并非所有搜索引擎爬虫都习惯于或足够适应对围绕客户端渲染架构中广泛使用的复杂JavaScript结构实现的站点进行索引；这可能会损害网页可见性，导致较低的自然发现率。
虽然关于加载速度的讨论往往倾向于静态元素的显示速度（由于初始轻量级服务器响应，静态元素的显示速度确实会更快），但当成都小程序开发考虑其他因素（例如，呈现完整的交互性网页所需的总时间）时，情况就不那么乐观了。由于对网络条件和用户计算能力的依赖性更强，初始加载后的内容更新实际上可能成为用户的痛点。
不幸的是，让客户管理这么多东西可能会带来网络安全风险。公平地说，如果您的开发人员对网络安全实践有很好的了解，这并不是您应该担心的问题。但请记住，错误确实会发生，有时成都小程序开发在项目中使用的库可能会共享比成都小程序开发预期更多的数据。在这些情况下，任何人都可以看到这些信息。
同构Javascript的SSR或通用渲染是一种结合两全其美的技术：SSR的速度和CSR的交互性。
使用通用渲染时，页面首先在服务器上渲染，然后将一个小的JavaScript文件发送到浏览器以完成页面渲染。这为您提供了SSR的速度，因为浏览器无需执行任何工作即可渲染初始页面，以及CSR的交互性，因为浏览器可以更新页面而无需重新加载整个页面。
更快的初始加载时间：页面在发送到浏览器之前在服务器上呈现，因此可以立即加载。
更好的SEO：SSR页面更容易被搜索引擎索引，这有助于提高您网站的搜索排名。
更具互动性：浏览器无需重新加载整个页面即可更新页面，从而可以提高用户体验。
更灵活：您可以使用任何JavaScript框架在服务器上和浏览器中呈现页面。
实现起来更复杂：通用渲染的实现比SSR或CSR更复杂。
后续页面加载速度可能会更慢：初始页面加载完成后，后续页面加载速度将比使用CSR慢，因为浏览器必须从服务器下载JavaScript文件。
总体而言，通用渲染对于需要快速且SEO友好的网站来说是一个不错的选择。如果您愿意付出额外的努力来实现它，通用渲染可以为您提供两全其美的效果。
以下是一些使用通用渲染的网站示例：
百度搜索：百度搜索使用通用渲染来确保互联网连接速度较慢的用户能够快速加载搜索结果页面。
Twitter：Twitter使用通用渲染来确保推文能够立即为用户加载。
Medium：Medium使用通用渲染来提供流畅且可交互的阅读体验。
如果您正在考虑在网站上使用通用渲染，那么需要记住以下几点：
确保您的服务器足够快：服务器需要能够快速呈现页面，以便用户可以立即加载。
使用良好的JavaScript框架：您使用的JavaScript框架应该针对性能进行良好的优化。
彻底测试您的网站：在将您的网站部署到生产环境之前，请确保您的网站能够正常使用通用渲染。
虽然开发人员可以使用任何框架来创建通用渲染页面，但成都小程序开发已经看到极其强大和友好的框架的兴起，正在改变Web开发的格局。
React.js以其以组件为中心的理念重塑了现代Web开发的格局。除此之外，React中的服务器端渲染增强了应用程序的性能和SEO。它专为构建丰富的用户界面而设计，引入了虚拟DOM，可确保高效的更新和渲染。
该框架专注于可重复使用的组件，简化了代码并加快了开发速度。React被科技巨头和初创公司广泛采用，凸显了其在技术讨论中的重要性。
Next.js是一个框架应该努力实现的目标：它灵活、文档齐全，并提供了多种部署网页的方法。
Next.js因其自动代码拆分功能而脱颖而出——从而加快了页面加载速度——这直接对用户参与率产生积极影响——这是董事会会议上经常讨论的一项关键指标！
Svelte采用面向未来的方法构建响应式Web应用程序。它在构建时将您的代码编译为微小的独立JavaScript模块，而不是在运行时对其进行解释，从而提供显著的速度优势，这对于在当今快节奏的市场环境中保持竞争力至关重要。
对于那些准备抛弃NodeJS的人来说，Deno是一个功能强大的运行时，由与NodeJS相同的开发人员创建，而Fresh是其对现代JavaScriptWeb框架的回应，采用极简主义风格，专为Typescript构建。Fresh可能是一个新手，但它有潜力成长并席卷全球。
我很想明确说明您应该采用哪种方法。但JavaScript开发服务的现实情况是，没有一刀切的答案。每个项目都有自己独特的要求。因此，成都小程序开发最有价值的建议是经过深思熟虑，并根据成都小程序开发迄今为止讨论的内容进行思考。哪种解决方案最适合您、您的项目和您的团队？无论您选择哪种，请放心，有无数的工具和解决方案可用于支持您的开发之旅。
