为了使网站 SEO 友好，我们必须在 Angular 中实现应用程序的 Server side rendering。
我已经阅读了很多关于服务器端渲染的文章。在阅读的过程中，我了解了两种渲染类型。
1.静态服务器端渲染 2. 动态服务器端渲染
但这意味着什么？我没有从我读过的文章中得到这个。仍然困惑为我的应用程序选择哪一个。
所以我只想知道我们必须为哪种类型的应用程序/网站使用静态以及我们必须为哪种类型的应用程序/网站使用动态服务器端渲染？
【问题讨论】：
标签： angular typescript server-side-rendering angular-universal
正如您所说，有两种方法可以在服务器上呈现 Angular 应用程序。以下是不同之处，并附有说明其用法的示例。
本质上，这是指为您的应用生成预渲染页面的过程，然后您可以使用Amazon S3 等服务静态托管这些页面。这些文件是静态的这一事实也意味着它们很容易通过 CDN 提供服务。您只需在本地机器或 CI 环境中构建文件，然后推送到主机所在的任何位置。这是Pre-rendering Angular Applications 的简短指南。
最终，您在 Angular 应用程序中定义的每条路由都会生成一个 HTML 文件，其中包含在加载时显示的任何动态生成的内容。这显然适用于搜索引擎和爬虫。当浏览器加载您的一个页面时，它会立即获得预渲染响应，然后 Angular 会启动您的控制器、服务等中定义的所有动态行为。
示例：
您已经建立了一个展示某些产品的营销网站。它有固定数量的路线（家、关于、联系方式）。构建应用程序后，您将获得 3 个静态 HTML 文件、一些 Javascript 以及涉及的任何其他资产。
您可能已经猜到了，这在您有动态路由时特别有用（例如/products/:productId）。使用 Angular Universal，我们可以在 Node 中运行 Express.js 服务器，它会在客户端请求时动态呈现每个页面。这需要更多时间，但非常值得！
示例：
您已经建立了一家商店，并且每次添加新产品时，您都希望它可供 Google 和类似网站索引。您还希望它在 Facebook 等 Open Graph 预览渲染器中很好地显示。
【讨论】：
/products/:productId 路由是否会在每次请求时重新渲染？只是想知道是否有一种方法可以从动态模板生成静态 HTML 页面，以及一种使其无效的方法，以便在驱动它的动态数据发生变化时重新生成它。
Cache-Control 标头。您可以为此使用 Angular 的 PLATFORM_ID 和 REQUEST 注入令牌，这将允许您访问请求对象，类似于 Express.js。查看本教程关于在 SSR 期间设置 cookie，因为它使用类似的逻辑：davidsekar.com/angular/…
动态 SSR 的概念是，将启动一个实时节点服务器，每当路由被命中时，它将动态生成和序列化应用程序——将该字符串返回给浏览器。
静态预渲染是当我们想要预渲染路由列表，并创建静态文件（即：index.html、about-us.html 等）然后使用我们选择的服务器稍后提供这些文件。
预渲染通常会为您提供更好的性能，因为我们不需要等待服务器访问您应用程序中的所有必要 API，并且无需“序列化”任何内容，它已经拥有应用程序的所有序列化 HTML为每个路由文件输出。 以下是我们在考虑需要采取哪条路线之前与客户一起考虑的问题清单。
您的应用程序本身相当静态。 （或者至少是您尝试预渲染的路线） 例如：首页 |关于我们 |联系我们
您网站的非常动态的部分（以及登录/身份验证障碍后面的部分）可以指向您应用程序的正常客户端呈现 (CSR) 版本，并且 Angular 可以正常引导自身。
您的应用程序不会经常更新。 每当需要对静态路由进行一些更改时，您只需再次运行构建脚本并重新发布包含所有预渲染文件的 /dist 文件夹。
通常大多数应用程序都需要静态预渲染（因为身份验证墙后面的任何路由都不会从使用 SSR 中获得太多/任何好处，因为主要目的之一是 SEO 收益，并提高感知性能。 请记住，您始终可以让应用程序的某些方面在 SSR 期间不呈现，而在 CSR 期间填充这些动态部分！ （客户端渲染）
参考 https://medium.com/@MarkPieszak/angular-universal-server-side-rendering-deep-dive-dc442a6be7b7
【讨论】：