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

Sur*_*iya 1 typescript server-side-rendering angular-universal angular

为了使网站SEO友好,我们必须在中实现Server side rendering该应用程序Angular

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

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

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

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

so-*_*ude 6

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

\n

动态SSR概念是,将有一个实时 Node 服务器启动,每当路由被命中时,它将动态生成并序列化网页并将其返回到浏览器。

\n

静态预渲染是指我们想要预渲染路由列表,并预先创建静态文件(即:index.html、about-us.html 等),然后使用我们选择的静态文件服务器(nginx 、S3 托管等)以便稍后提供这些文件。

\n

那么我们如何知道选择哪一个以及何时选择呢?

\n

预渲染通常会给您带来更好的性能,因为我们\xe2\x80\x99不会等待服务器访问应用程序中的所有必要的API,并且不需要\xe2\x80\x9cserialized\xe2\x80\x9d,它已经具有为每个路由文件输出的应用程序的所有序列化 HTML。\nHere\xe2\x80\x99 是我们在考虑需要采用哪条路由之前与客户一起考虑的问题的良好列表。

\n

何时使用静态预渲染:

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

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

    \n
  • \n
  • 您的应用程序不经常更新\xe2\x80\x99。\n每当静态路由需要进行一些更改时,您只需再次运行构建脚本并重新发布包含所有预渲染文件的 /dist 文件夹。

    \n
  • \n
\n

何时使用动态 SSR:

\n
    \n
  • 您的应用程序(以及 SSR 所需的路由)非常动态
  • \n
  • 您有 \xe2\x80\x9ct 趋势产品列表\xe2\x80\x9d | \xe2\x80\x9clive 数据\xe2\x80\x9d | 等等,您需要为每个服务器端渲染正确填充。
  • \n
  • 您的应用程序结构是基于 JSON 文件或 CMS 呈现的,其中任何内容都可能在任何给定时刻发生变化。
  • \n
\n

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

\n

SSR 的主要目的是提高 SEO 效果并提高感知性能。任何需要用户身份验证的路由都不会从使用 SSR 中获得太多/任何好处。

\n

请记住,您始终可以在 SSR 期间不渲染应用程序的某些方面,并在 CSR 期间填充这些动态部分!(客户端渲染)

\n

当您关注它时,也看看 CDN。IMO,预渲染和 CDN 用例的一些方面是相似的。

\n

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

\n


Ric*_*cis 5

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

静态服务器端渲染

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

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

例:

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

动态服务器端渲染

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

例:

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

  • 每次请求时,“/products/:productId”路由都会重新渲染吗?只是想知道是否有一种方法可以从动态模板生成静态 HTML 页面,以及一种使其无效的方法,以便在驱动它的动态数据发生变化时重新生成它。 (2认同)