认识达内从这里开始

随着互联网的不断发展，越来越多的人都在学习计算机编程开发技术，而今天我们就通过案例分析来了解一下，服务器渲染的类型与实践方式分析。

渲染

SSR：服务器端渲染-在服务器上将客户端或通用应用程序渲染为HTML。

CSR：客户端渲染-在浏览器中渲染应用程序，通常使用DOM。

Rehydration：在客户端“启动”JavaScript视图，以便它们重用服务器渲染的HTML的DOM树和数据。

Prerendering：在构建时运行客户端应用程序以将其初始状态捕获为静态HTML。

TTFB：TimetoFirstByte-被视为单击链接和一个内容进入之间的时间。

FP：FirstPaint-任何像素一次对用户可见。

FCP：FirstContentfulPaint-请求的内容(文章正文等)变得可见的时间。

TTI:TimeToInteractive-页面变为可交互的时间(事件连接等)。

ServerRendering

服务器渲染为服务器上的页面生成完整的HTML以响应导航。这避免了在客户端上进行数据获取和模板化的额外往返，因为它是在浏览器获得响应之前处理的。

服务器渲染通常会产生快速的次绘制(FP)和次内容绘制(FCP)。在服务器上运行页面逻辑和渲染可以避免向客户端发送大量JavaScript，这有助于实现快速交互时间(TTI)。这是有道理的，因为通过服务器渲染，您实际上只是向用户的浏览器发送文本和链接。这种方法可以很好地适用于各种设备和网络条件，并开启了有趣的浏览器优化，例如流式文档解析。

通过服务器渲染，用户不太可能在使用您的网站之前等待CPU绑定的JavaScript处理。即使无法避免三方JS，使用服务器渲染来降低您自己的一方JS成本也可以为您提供更多的“预算”。但是，这种方法有一个主要缺点：在服务器上生成页面需要时间，这通常会导致字节时间(TTFB)变慢。

服务器渲染是否足以满足您的应用程序在很大程度上取决于您正在构建的体验类型。关于服务器渲染与客户端渲染的正确应用程序存在长期争论，但重要的是要记住，您可以选择对某些页面使用服务器渲染而不是其他页面。一些网站已经成功地采用了混合渲染技术。Netflix服务器呈现其相对静态的登陆页面，同时为交互密集型页面预取JS，为这些较重的客户端呈现页面提供更好的快速加载机会。

许多现代框架、库和架构使得在客户端和服务器上呈现相同的应用程序成为可能。这些技术可用于服务器渲染，但重要的是要注意渲染发生在服务器和客户端的架构是它们自己的解决方案类，具有非常不同的性能特征和权衡。React用户可以使用renderToString()或基于它构建的解决方案，例如Next.js进行服务器渲染。Vue用户可以查看Vue的服务器渲染指南或Nuxt。Angular有Universalframework.大多数流行的解决方案都采用某种形式的hydration作用，因此在选择工具之前请注意使用的方法。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。