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

Question

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

angulartypescriptserver-side-renderingangular-universal

5

为了使网站更加友好，我们需要在Angular应用中实现应用的服务器端渲染(Server side rendering)。

我已经阅读了许多关于服务器端渲染的文章，阅读过程中我了解到了两种类型的渲染方式。

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

但这意味着什么？我从阅读的文章中没有得到答案。对于我的应用程序，我仍然不确定该选择哪种类型。

因此，我想知道我们应该为哪种类型的应用程序/网站使用静态服务器端渲染，以及应该为哪种类型的应用程序/网站使用动态服务器端渲染？

- Surjeet Bhadauriya

2个回答

5

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

动态 SSR 是指当路由被访问时，会启动一个 Node 服务器实例，动态生成和序列化应用程序，并将该字符串返回给浏览器。

静态预渲染 是指我们要预先渲染一组路由，创建静态文件（例如：index.html、about-us.html 等），然后使用我们选择的服务器（nginx、S3 托管等）在以后提供这些文件。

那么我们如何知道何时选择哪种方案？

预渲染通常会提供更好的性能，因为我们不需要等待服务器访问应用程序中所有必要的 API，也不需要进行 "序列化"，因为每个路由文件都已经生成了所有序列化的 HTML 应用程序输出。以下是我们在考虑采取哪种方案之前与客户一起考虑的问题清单。

什么时候使用静态预渲染：

您的应用程序本身相当静态。（或者至少你想要预渲染的路由是静态的）例如：主页|关于我们|联系我们
站点非常动态的部分（以及那些在登录/身份验证屏障后面的部分）可以指向客户端渲染（CSR）版本的应用程序，并且 Angular 可以正常引导自己。
您的应用程序不经常更新。每当需要在静态路由上进行更改时，您可以简单地再次运行构建脚本并重新发布包含所有预渲染文件的 /dist 文件夹。

什么时候使用动态 SSR：

您的应用程序（和您需要进行 SSR 的路由）非常动态
您有一个需要正确填充每个服务器端呈现的 "热门产品" | "实时数据" | 等列表。
基于 JSON 文件或 CMS 渲染您应用程序的结构，在任何给定时刻都可能发生任何更改。

通常大多数应用程序都需要静态预渲染（因为身份验证墙后面的任何路由都没有从利用 SSR 中获得太多/任何好处，因为其中一个主要目的是 SEO 收益和性能表现的提升。记住，您总是可以使应用程序的某些方面在 SSR 期间不被渲染，并在 CSR（客户端渲染）期间填充那些动态部分！

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

- so-random-dude

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Richard Francis · Accepted Answer

如你所说，有两种在服务器上渲染Angular应用的方式。以下是它们的区别，并且包括了使用示例来说明它们的用途。

静态服务端渲染

基本上，这是生成已预渲染页面的过程，你可以使用 Amazon S3 等服务静态地托管这些文件。这些文件是静态的，这意味着它们很容易通过CDN进行分发。你只需在本地或CI环境上构建文件，然后将其推送到主机所在的位置。这里是一个关于预渲染Angular应用程序的简短指南。

最终，你在Angular应用中定义的每个路由都会生成一个HTML文件，其中包含加载时显示的任何动态生成的内容。这显然对搜索引擎和网络爬虫非常友好。当浏览器加载您的页面之一时，它会立即得到一个预渲染的响应，然后Angular将使用控制器、服务等中定义的所有动态行为。 示例： 你已经建立了一个展示某种产品的营销网站。它有固定数量的路由（主页、关于、联系我们）。在构建应用程序时，你会得到3个静态HTML文件、一些Javascript代码和其他相关资产。

动态服务器端渲染

你可能已经猜到，这对于具有动态路由（例如/products/:productId）的情况非常有用。使用Angular Universal，我们可以在Node中运行一个Express.js服务器，当客户端请求时动态地呈现每个页面。这需要更多时间，但非常值得！ 例子： 你已经建立了一个商店，每次添加新产品时，你希望它能够被Google等搜索引擎索引，并且在Facebook等Open Graph预览渲染器中能够良好显示。