StoryTime Angular：我的博客、SEO 与 SSR 的冲击

Source: Dev.to

项目背景

我的第一个大型 Angular 项目既不是企业应用，也不是半成品的副项目：它是我的睡眠博客。
当时我想推出一个真正的生产站点，面临真实的约束：内容、SEO、性能、部署……尤其是使用 Angular 来提升技能。

技术选型

后端

我选择了一个非常务实的后端：纯 PHP。

• 我之前已经做过。
• 部署极其简单。
• 对于博客来说不需要复杂的基础设施。

后端主要充当管理文章的基础 API：没有花哨的功能，但很有效。

前端

我选择 Angular 有两个简单的原因：

• 我已经稍微了解它。
• 我真的想在这上面提升水平。

写作工作流

1. 撰写：我在 Google Docs 上写文章。
2. 导入：我把它们导入我的 Angular 工具。导入在初期是半自动的。

清理 HTML

Google Docs 会添加大量标签、样式和垃圾 HTML。
为了清理这些，我花了数小时：

• 理解正则表达式，
• 测试、破坏、改进它们。

正是在那时，我对正则表达式变得得心应手。

SEO 与 SSR 问题

博客上线后，失望极大：我的页面被错误索引，甚至在 Google 上根本不可见。
我随后发现 Google 不喜欢（或不推荐）使用 客户端渲染（CSR）的站点进行 SEO。

转向 Angular Universal

解决方案显而易见：Angular Universal（SSR）。

实际情况：

• 文档极少，几乎没有清晰的教程。
• 经验反馈少，身边没人做过。

部署

我从未真正：

• 配置过服务器，
• 管理过端口，
• 在已有站点后面运行 Node 服务器。

我只能在实践中学习：

• 如何暴露 Angular Universal，
• 如何让 PHP 与 Node 共存，
• 如何在生产环境中不把一切弄坏。

动态 meta 标签

当时几乎没有关于每页动态 meta 标签的文档或具体示例。
经过长时间的搜索，我发现了 Renderer2，它终于让我能够在服务器端正确操作 DOM。

Angular 的演进与经验教训

• Angular 已经有了巨大的演进；SSR 变得更易使用。
• 工具更成熟，文档也大幅提升。
• 如今，搭建 SSR 项目比当时简单得多。

这段经历仍是最具教育意义的之一：

• 深入 Angular，
• 实际的 SEO，而非理论，
• 服务器部署，
• 生产约束。

结论

项目虽不完美，但在我的前端开发者道路上是一次巨大的跨越。
虽然有点旧，但对访客仍有价值。

博客链接 :