Angular 动态内容通用?

Angular Universal for dynamic content?

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

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

Angular Universal 的服务器端渲染会应用到这里吗?

我看到 Universal 确实有一个叫做 TransferState 的东西。但这可以用于动态内容吗?我假设如果您每次更新 posts-DB 时都重建服务器端应用程序,它应该能够 运行 在每个(动态解析)post 上呈现。例如。这将是服务器端代码的操作列表:

  1. 预渲染主站点
  2. 从数据库加载所有可能的博客文章 URL 数组
  3. 获取他们的内容并预呈现其中的每一个
  4. 当用户请求博客 post 时,仅提供主站点和 post。所有其他 post 都已预渲染并在服务器上也可用,但除非明确请求
  5. 否则不会交付

那是可能的还是我应该停止进一步研究 Universal?

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

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

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

注意:预呈现不允许加载动态内容,只有服务器端呈现才可以。