Angular Universal 用于动态内容？答案

【问题标题】：Angular Universal for dynamic content?Angular Universal 用于动态内容？
【发布时间】：2018-03-15 12:59:34
【问题描述】：

我想将 Angular Universal 用于两件事：SEO 和在社交媒体上预览网站。我知道静态网站内容是可能的。

但是动态内容呢？如果我希望搜索引擎和社交媒体爬虫不仅能找到带有欢迎屏幕的主站点，还能找到像 www.example.com/posts?articleName=what-is-angular-universal-good-for 这样的个人博客文章，该怎么办？这里路由/posts 由订阅queryParam articleName 的PostsComponent 处理。所以它总是呈现一篇从数据库中动态获取的文章。

Angular Universal 的服务器端渲染会应用在这里吗？

我看到 Universal 确实有一个叫做 TransferState 的东西。但这可以用于动态内容吗？我假设如果您每次更新帖子数据库时都重建服务器端应用程序，它应该能够在每个（动态解析的）帖子上运行渲染。例如。这将是服务器端代码的操作列表：

呈现主站点
从数据库中加载所有可能的博客文章 URL 数组
获取他们的内容并预渲染每一个内容
当用户请求博客文章时，只提供主站点和该文章。所有其他帖子也已预先呈现并在服务器上可用，但除非明确要求，否则不会交付

那么这可能吗，还是我应该停止进一步研究环球？

【问题讨论】：

标签： angular angular-universal

【解决方案1】：

Angular 服务器端将像任何其他服务器端平台一样工作。如果您必须从 url 获取文章，则会呈现该文章的信息，在这方面与 Wordpress 或 Django 网站没有什么不同。

Angular TransferState 只是一种机制，它将您在服务器中收集的所有信息传递给客户端，因此当应用程序在客户端启动时您不必再次执行某些请求。因此，您可能需要做一些 HttpIntercerptor，它会在发出请求之前检查 TransferState，以确保信息不存在。

【讨论】：

啊，所以我不需要预渲染所有内容，只需要应用程序核心和动态加载到其中的内容可以由爬虫处理吗？我认为 Wordpress 服务的网站就像过去的互联网一样，所有内容都预先呈现并从文件目录调用，而不涉及任何 JavaScript。
@Phil : 你有什么解决方案来使用角度服务器端渲染来渲染动态内容吗？
@MJ 我已经暂停在我的博客上进行开发，因为过去几个月我有太多工作要做。但是有三种可能的 SSR 解决方案：Angular Universal、Rendertron 和 Prerender-Loader：github.com/GoogleChromeLabs/prerender-loader 我个人想先迁移到 Angular 6 并检查 Universal 在最新版本中是否更容易设置，如果没有，我会使用prerender-loader，其他人评论说它比 rendertron 更容易设置。
您可能想查看入门工具包github.com/enten/angular-universal
prerendeing 与 ssr 不同，ssr 就像 nodejs 从 api 或数据库提供动态内容，很像 php 上的 wordpress，只是它是 nodejs。然而，预渲染是一种创建动态内容的静态版本的技术，因此服务器上的任何更改都必须重新构建。 Universal 仅 ssr。

【解决方案2】：

添加 Angular Universal 后，它会自动添加 ssr 并自动加载动态内容。如果它没有加载，那么通过在本地运行命令“ng run blog:serve-ssr”（博客是项目的名称）来检查你的控制台。应该有一些错误，这就是它不会加载的原因。解决问题后，它将自动加载动态内容。

注意：预渲染不允许加载只有服务器端渲染的动态内容。

【讨论】：