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

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（服务器端渲染）和静态预渲染

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

Static Pre-rendering是当我们想要预渲染路由列表，并创建静态文件（即：index.html，about-us.html等）然后使用我们的服务器时选择稍后提供这些文件。

那么我们如何知道何时选择哪个？

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

何时使用静态预渲染：

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

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

  ] >

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

何时使用动态SSR：

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

[通常，大多数应用程序将需要静态预渲染

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

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