共计 2997 个字符，预计需要花费 8 分钟才能阅读完成。
作为开发者，我们经常会面临一些影响我们整个网站结构的决定，其中 web 开发者一定要做的核心决定之一就是在应用程序中实现逻辑和渲染的位置。这可能比较难，因为有很多不同的方式来构建一个网站。
我们在这一领域的了解主要来源于在过去的几年在 Chrome 工作期间，一直与一些大的网站的交流得来的。从广义上来讲，我们鼓励开发人员去通过完全 rehydration 方法进行服务端渲染或者是静态渲染。
为了更好的理解我们所选择的技术架构，我们需要对每种方法有一种扎实的理解，并且在谈论时要使用一致的术语。这些方式的不同点有助于我们说明通过性能和渲染之间寻求一个平衡。
术语
渲染
SSR: Server-Side Rendering – 在服务器端渲染内容的方式。
CSR: Client-Side Rendering – 通常在浏览器中使用 DOM 来渲染应用程序的过程。
Rehydration: 在客户端“启动”Javascript 视图，使得他们能够重用服务器端渲染的 html 的 dom 树和数据。
Prerendering: 在构建时运行客户端应用程序来使用其初始状态作为静态的 html 页面。
性能
TTFB: Time to First Byte – 点击一个链接到返回的第一个字节数据所用的时间。
FP: First Paint – 首次任何像素对用户可见的时间（也就是首先将像素绘制到屏幕的时刻）。
FCP: First Contentful Paint – 首次内容对用户可见的时间（也就是浏览器将第一个 DOM 渲染到屏幕的时间）。
TTI: Time To Interactive – 页面变为可交互的时间。
服务器端渲染
服务器端渲染会在服务器上生成整个的 HTML 页面，然后整体返回给浏览器。由于它在返回给浏览器之前就已经处理好了，所以会避免客户端在数据获取和模板化的额外开销。
服务器渲染很快就会产生 First Paint（FP）和 First Contentful Paint（FCP）。在服务器端运行页面逻辑和渲染，使之避免了因此而发送大量的 Javascript 给客户端。也会有助于我们实现一个快速的 Time To Interactive（TTI）。这是可能的，因为在服务器端渲染的话，你仅仅需要发送文本和链接给浏览器。这种方式在大范围的设备和网络环境下都会很好的运行，与此同时也会提起你对浏览器优化的兴趣，比如说流文档解析。
通过服务器端渲染，用户不太可能等待 CPU 绑定的 javascript 处理完毕之后才能去使用您的站点。即使是第三方 js 不可避免。使用服务器端渲染也会减少你的 js 开销，会给您处理其他事情留有更多的“预算”。然而，这种方式有一个主要的缺点：在服务器端生成页面会减慢你的 Time To First Byte（TTFB）。
服务器端渲染对于你的应用程序是否够用，很大一部分依赖于你个人的构建经验。在服务器端渲染和客户端渲染哪一个更好这个争论曾经持续了很长时间。但是要记住很重要的一点，你可以在一些页面中使用服务器端渲染，而不是全部都用。一些网站已经成功使用了混合渲染技术，Netflix 在服务器端渲染，呈现其相对于静态的页面，同时为交互繁重的页面预取 js，给这些较重的客户端页面提供一个更快的加载机会。
许多现代浏览器，类库和架构使得在客户端和服务器端渲染同一个应用程序成为可能。这些技术可以被用于服务器端渲染，然而，重要的是注意在客户端和服务器端渲染的架构都有他们不同的解决方案，具有非常不同的性能特征和权衡。React 用户可以使用 renderToString() 或者是在其之上的解决方案来实现服务器端渲染，比如说 Next.js。Vue 用户可以查阅 Vue 的 server rendering guide 或者是 Nuxt。Angular 有 Universal。最流行的解决方案会采用某些形式的 hydration。在选择一个工具之前要注意使用的方法。
静态渲染
静态渲染在构建时发生，会提供一个很快的 First Paint，First Contentful Paint，Time To Interactive – 假设客户端 js 是有限的。跟服务器端渲染区别之一是它会设法实现一个始终如一的快速的 Time To First Byte，因为 HTML 页面不必动态生成。通常来说，静态渲染意味着会提前对每一个 URL 生成一个单独的 HTML 文件。由于预先生成了 HTML 的响应，所以静态渲染可以部署在多个 CDN 来用于边缘缓存。
静态渲染的解决方案多种多样，像 Gatsby 这样的工具，开发者会感觉他们的应用程序是动态渲染的，而不是作为构建时生成的。而像 Jekly 和 Metalsmith 则会拥抱他们的静态生态系统，提供更多模板驱动的方法。
静态渲染的缺点之一就是要为每一个可能的 URL 单独生成一个 HTML 文件，当你不能提前预知这些 URL 都有什么，或者网站有非常多的唯一页面的时候，这或许是一个挑战，又或者是不可能实现的。
React 用户可能很熟悉 Gatsby，Next.js，static export 或者是 Navi – 他们都使得作者使用组件变得很方便。然而，重要的是理解静态渲染和预渲染的不同点：静态渲染页面是可交互的，不需要执行太多的客户端的 js，而预渲染则会提升单页应用的 First Paint 或者是 First Contentful Paint，为了让页面变为真正的可交互其一定要在客户端启动。
如果你不确定给定的解决方案是静态渲染，还是预渲染，尝试下如下测试：禁用 Javascript，加载已经创建好的页面。对于静态渲染页面，如果不启用 Javascript，大部分功能依然存在。而对于预渲染页面，可能依然有一些基本的功能可以使用，比如说超链接，但是大部分页面将会是惰性的。
另一个有用的测试是使用 Chrome DevTool 降低你的网络带宽，观察页面变为可交互之前 Javascript 已经下载的数量。预渲染通常需要更多的 Javascript 来使页面变的可交互，并且 Javascript 要比静态渲染使用的渐进增强方法要更复杂。
服务器端渲染 vs 静态渲染
服务器端渲染并不是灵丹妙药 – 它的动态特性会带来明显的计算性能开销。许多服务器端渲染解决方案都不会提早刷新，可能会导致延迟 TTFB 或者是发送的数据量加倍。在 React 中，renderToString() 可能是很慢的，因为它是同步并且是单线程的。要使得服务器渲染“正确”可能会涉及查找或者构建一个组件缓存的解决方案，管理内存消耗，等等。你通常会多次处理 / 重新构建相同的应用程序 – 一次在客户端，一次在服务器端。仅仅是因为服务器端渲染可以使某些东西更快显示，但并不是突然意味着会减少你的工作量。
服务器端渲染可以按需要为每个 URL 生成对应的 HTML，但是它却慢于静态渲染的内容。如果你可以进行一些额外的工作，那么服务器端渲染 + HTML 缓存可以极大的减少服务器渲染的时间。服务器端渲染的优点是有能力获取更多“实时”的数据并且返回比静态渲染更加完整的结果集，个性化的页面是服务器渲染的一个具体的事例，不过这种对于静态渲染来说，就不太适合了。
在构建 PWA 的时候，服务器端渲染也可以提出一些有有趣的决策。所以是全页 server worker 更好，还是用服务器渲染仅仅渲染单独的内容片段更好呢？
本文翻译自：
https://developers.google.com…
本文转载自 http://www.lht.ren/article/13/
