静态服务器端渲染或动态服务器端渲染

静态服务器端渲染

本质上,这是指为应用程序生成预呈现页面的过程,然后您可以使用诸如 Amazon S3 . 这些文件是静态的这一事实也意味着它们很容易在CDN之外提供服务。您只需在本地计算机或CI环境中构建文件,然后将其推送到主机所在的任何位置。这里有一个关于这个问题的简短指南 Pre-rendering Angular Applications .

最终,您在Angular应用程序中定义的每条路线都会生成一个HTML文件,其中包含加载时显示的任何动态生成的内容。这显然很适合搜索引擎&爬虫。当浏览器加载您的一个页面时,它会立即得到一个预呈现的响应,然后Angular会启动控制器、服务等中定义的所有动态行为。

你已经建立了一个营销网站,展示了一些产品。它有固定数量的路线(家、大约、联系)。在构建应用程序时,您将获得3个静态HTML文件、一些Javascript以及涉及的任何其他资产。

动态服务器端渲染

/products/:productId )。使用Angular Universal,我们可以在节点中运行Express.js服务器,当客户端请求时,该服务器将动态呈现每个页面。这需要更多的时间,但非常值得!

你已经建立了一个商店,每次你添加一个新产品时,你都希望它能为谷歌和其他喜欢的人提供索引。您还希望它在开放图形预览渲染器(如Facebook)中显示良好。

动态SSR(服务器端渲染)&静态预渲染

它的概念是,将有一个实时节点服务器,每当路由被命中时,它将动态生成并序列化应用程序,并将该字符串返回到浏览器。

静态预渲染 是指我们希望预先呈现路由列表,创建静态文件(例如:index.html、about-us.html等),然后使用我们选择的服务器稍后提供这些文件。

预呈现通常会为您提供更好的性能,因为我们不需要等待服务器访问应用程序中所有必要的API,也不需要序列化任何内容,它已经为每个路由文件输出了应用程序的所有序列化HTML。 这是一个很好的问题清单,是我们考虑客户需要考虑的路线。

何时使用静态预渲染:

• 您的应用程序本身是相当静态的。 (或者至少是您尝试预渲染的路线) 例如:主页|关于我们|联系我们

• 站点中非常动态的部分(以及登录/身份验证屏障后面的部分)可以指向应用程序的正常客户端呈现(CSR)版本,Angular可以正常引导自身。

• 每当需要对静态路由进行某些更改时,只需再次运行构建脚本并重新发布包含所有预渲染文件的/dist文件夹。

何时使用动态SSR:

• 您的应用程序(以及您需要进行SSR的路由)非常动态
• 您有一个趋势产品列表“实时数据”等,您需要为每个服务器端渲染正确填充这些产品。

通常,大多数应用程序都需要静态预渲染 (因为认证墙后面的任何路由都不会从使用SSR中获得太多/任何好处,因为其中一个主要目的是SEO收益和改进感知性能。 请记住,您总是可以在SSR期间不渲染应用程序的某些方面,并在CSR期间填充这些动态部分!(客户端渲染)

参考 https://medium.com/@MarkPieszak/angular-universal-server-side-rendering-deep-dive-dc442a6be7b7