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

Question

要使网站SEO友好，我们必须在Server side rendering中实现应用程序的Angular。

我已经阅读了许多有关服务器端渲染的文章。在阅读时，我了解了两种类型的渲染。

1。静态服务器端渲染  2.动态服务器端渲染

但这是什么意思？从我读过的文章中我不了解这一点。仍然很困惑为我的应用选择哪一个。

所以我只想知道对于哪种类型的应用程序/网站，我们必须使用“静态”，对于哪种类型的应用程序/网站，我们必须使用“动态服务器端”呈现。

Answer 1

正如您所说，有两种方法可以在服务器上呈现Angular应用程序。这是区别，并举例说明了它们的用法。

静态服务器端渲染

本质上，这是指为您的应用生成预渲染页面的过程，然后您可以使用诸如Amazon S3之类的服务来静态托管这些页面。这些文件是静态的事实也意味着它们很容易从CDN中提供。您只需在本地计算机或CI环境上构建文件，然后将其推送到主机所在的位置即可。这是有关Pre-rendering Angular Applications的简短指南。

最终，您在Angular应用程序中定义的每条路线都会生成一个HTML文件，其中包括在加载时显示的任何动态生成的内容。这显然可以与搜索引擎和搜寻器很好地配合。当浏览器加载您的页面之一时，它会立即得到预先渲染的响应，然后Angular会使用您的控制器，服务等中定义的所有动态行为。

示例：

您已经建立了一个展示某些产品的营销网站。它具有固定数量的路线（家庭，大约，联系）。构建应用程序后，您将获得3个静态HTML文件，一些Javascript以及所涉及的其他资产。

动态服务器端渲染

您可能已经猜到了，这对于具有动态路由（例如/products/:productId）的情况特别有用。使用Angular Universal，我们可以在Node中运行Express.js服务器，该服务器将在客户端请求时动态呈现每个页面。这需要更多时间，但值得！

示例：

您已经建立了一家商店，每次添加新产品时，您都希望该产品可供Google等索引。您还希望它在Open Graph预览渲染器（例如Facebook）中很好地显示。

Answer 2

动态SSR（服务器端渲染）和静态预渲染

动态SSR 的概念是，将启动一个实时Node服务器，每当命中Route时，它将动态生成并序列化应用程序-将String返回浏览器。

静态预渲染是指我们要预渲染路线列表并创建静态文件（例如：index.html，about-us.html等）然后使用我们选择的服务器稍后再提供这些文件。

那么我们怎么知道选择哪个以及何时选择呢？

预渲染通常可以为您提供更好的性能，因为我们不等待服务器使用您应用程序中所有必需的API，并且无需“序列化”任何内容，它已经拥有应用程序的所有序列化HTML为每个Routes文件输出。 这是我们与客户考虑的一系列问题，然后再考虑我们需要采取的路线。

何时使用静态预渲染：

• 您的应用程序本身是静态的。 （或至少是您要预渲染的路线） 例如：主页|关于我们|与我们联系

• 站点的非常动态的部分（以及位于登录/身份验证屏障后面的部分）可以指向应用程序的常规客户端呈现（CSR）版本，而Angular可以正常引导自身。 / p>

• 您的应用程序更新不是很频繁。 每当需要对静态路由进行一些更改时，只需简单地再次运行构建脚本，然后重新发布包含所有预渲染文件的/ dist文件夹即可。

何时使用动态SSR：

• 您的应用程序（以及您到达SSR的路线）非常动态
• 您有一个“趋势产品”列表| “实时数据” |等等，您需要为每个服务器端渲染正确填充。
• 您的应用程序结构是基于JSON文件或CMS呈现的，在任何给定时刻任何内容都可能发生变化。

通常大多数应用程序都需要静态预渲染（因为身份验证墙后面的任何路由都无法从使用SSR中获得太多/任何收益，因为主要目的之一是获得SEO） ，并改善了感知性能。 请记住，您始终可以使应用程序的某些方面在SSR期间不呈现，并在CSR期间填充这些动态部分！

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