Angular页面在服务器端渲染后加载两次

的原因是因为Angular框架的工作机制。

Angular框架采用了一种称为"预渲染"的技术，即在服务器端生成静态HTML页面，并将其发送给浏览器。这样可以提高首次加载页面的速度和搜索引擎的可索引性。

具体的加载过程如下：

1. 浏览器发送请求到服务器，请求Angular页面。
2. 服务器端使用Angular Universal进行服务器端渲染，生成静态HTML页面。
3. 服务器将生成的静态HTML页面发送给浏览器。
4. 浏览器接收到静态HTML页面后进行解析和渲染，显示给用户。
5. Angular框架在浏览器端重新初始化，重新加载一次页面。

这样，页面在服务器端渲染后会加载两次，第一次是服务器端渲染生成的静态HTML页面，第二次是浏览器端重新初始化后加载的动态页面。

这种加载方式的优势在于提高了首次加载页面的速度和搜索引擎的可索引性。静态HTML页面可以更快地呈现给用户，提升用户体验；同时，搜索引擎可以直接抓取到静态HTML页面的内容，提高网站的搜索排名。

对于解决这个问题，可以采取以下方法：

1. 使用Angular Universal的预渲染功能时，可以在服务器端设置一个标志位，判断是否是服务器端渲染的第一次加载，如果是，则不进行浏览器端的重新初始化和加载。
2. 在Angular应用中，可以通过检测是否是服务器端渲染的第一次加载来避免重复加载资源，例如在组件中使用ngIf指令来控制某些资源的加载。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf
• 腾讯云CDN加速：https://cloud.tencent.com/product/cdn
• 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
• 腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb