一、背景与问题引入
在做网页开发的时候，我们经常会遇到两个让人头疼的问题。一个是搜索引擎优化（SEO）不友好，另一个是首屏加载白屏。比如说，当你做了一个很酷炫的网站，用了很多前端框架，像Angular，但是搜索引擎的爬虫在抓取页面内容的时候，可能只能看到一堆JavaScript代码，根本搞不清页面到底有啥内容，这样网站在搜索引擎里的排名就上不去，别人很难通过搜索找到你的网站。还有首屏加载白屏，用户打开网页后，半天都看不到内容，干等着，这体验可太糟糕了，用户很可能直接就走了。
Angular服务端渲染（SSR）就是解决这俩问题的好办法。它能让网页在服务器端就把内容渲染好，然后再发给浏览器，这样搜索引擎就能轻松抓取到页面的真实内容，首屏加载也快，用户体验大大提升。
二、Angular服务端渲染（SSR）基础
2.1 什么是服务端渲染
服务端渲染简单来说，就是在服务器那边把网页的内容生成好，再把生成好的完整页面发给浏览器。和传统的客户端渲染不一样，客户端渲染是把一堆JavaScript代码发给浏览器，浏览器再根据这些代码去生成页面内容，这个过程就比较慢，而且搜索引擎爬虫可能没办法执行这些JavaScript代码，就获取不到页面内容。
2.2 Angular SSR的工作原理
Angular SSR利用Angular Universal这个工具，它能在服务器端运行Angular应用。当用户请求一个页面的时候，服务器会执行Angular应用，把组件渲染成HTML，然后把这个HTML页面发送给浏览器。浏览器拿到这个已经渲染好的页面，就可以直接显示，不用再等JavaScript代码执行完才显示内容。
2.3 搭建Angular SSR项目
我们来实际搭建一个Angular SSR项目。首先，你得确保已经安装了Angular CLI。如果没安装，可以用下面的命令安装：
# 技术栈：Angular CLI
npm install -g @angular/cli
然后创建一个新的Angular项目：
# 技术栈：Angular CLI
ng new my-angular-ssr-app
cd my-angular-ssr-app
接着添加服务端渲染支持：
# 技术栈：Angular CLI
ng add @nguniversal/express-engine
这个命令会自动配置好Angular SSR所需的文件和依赖。
三、解决SEO不友好问题
3.1 SEO不友好的原因
前面说了，传统的客户端渲染，搜索引擎爬虫没办法执行JavaScript代码，所以抓取不到页面的真实内容。比如一个Angular应用，它的内容可能是通过JavaScript动态生成的，爬虫看到的只是一些空的HTML标签和JavaScript代码，根本不知道页面到底有啥。
3.2 Angular SSR如何解决SEO问题
Angular SSR在服务器端就把页面内容渲染好了，搜索引擎爬虫拿到的是完整的HTML页面，里面包含了页面的真实内容。这样搜索引擎就能轻松抓取到页面信息，对网站进行索引，网站在搜索引擎中的排名就会提高。
3.3 示例代码
我们来看看如何在Angular SSR项目中设置页面的元数据，让搜索引擎更好地理解页面内容。在组件中设置标题和描述：
// 技术栈：Angular
import { Component, OnInit } from '@angular/core';
import { Title, Meta } from '@angular/platform-browser';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor(private titleService: Title, private metaService: Meta) { }
ngOnInit() {
// 设置页面标题
this.titleService.setTitle('我的Angular SSR网站 - 首页');
// 设置页面描述
this.metaService.addTag({ name: 'description', content: '这是一个使用Angular SSR的网站，提供丰富的内容和良好的用户体验。' });
}
}
这样，搜索引擎爬虫在抓取页面的时候，就能获取到页面的标题和描述，对页面有更清晰的认识。
四、解决首屏加载白屏问题
4.1 首屏加载白屏的原因
客户端渲染的时候，浏览器要先下载JavaScript代码，然后执行这些代码，才能生成页面内容。这个过程需要一定的时间，在这段时间里，用户看到的就是白屏。
4.2 Angular SSR如何解决首屏加载白屏问题
Angular SSR在服务器端就把页面渲染好了，浏览器拿到的是已经渲染好的HTML页面，直接就可以显示，不需要等待JavaScript代码执行。这样首屏加载的速度就大大提高，用户几乎可以瞬间看到页面内容。
4.3 示例代码
我们来看看如何在Angular SSR项目中优化首屏加载。在服务器端渲染的时候，可以使用预渲染技术，提前把一些页面渲染好。在server.ts文件中添加预渲染逻辑：
// 技术栈：Angular
import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './src/main.server';
const app = express();
const distFolder = join(process.cwd(), 'dist/browser');
// 设置Angular引擎
app.engine('html', ngExpressEngine({
bootstrap: AppServerModule
}));
app.set('view engine', 'html');
app.set('views', distFolder);
// 预渲染路由
app.get('*', (req, res) => {
res.render('index', { req });
});
const port = process.env.PORT || 4000;
app.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
这样，当用户请求页面的时候，服务器会直接返回预渲染好的页面，首屏加载速度就会更快。
五、Angular SSR的应用场景
5.1 内容型网站
像新闻网站、博客网站这种内容型网站，需要搜索引擎能够抓取到页面内容，提高网站的曝光度。Angular SSR可以让搜索引擎轻松抓取到页面内容，同时也能提高首屏加载速度，给用户更好的体验。
5.2 电商网站
电商网站需要展示大量的商品信息，首屏加载速度对用户的购买意愿影响很大。Angular SSR可以快速渲染页面，让用户更快地看到商品信息，提高转化率。
5.3 企业官网
企业官网是企业的形象展示窗口，需要在搜索引擎中获得好的排名。Angular SSR可以优化网站的SEO，让更多的人通过搜索找到企业官网。
六、Angular SSR的技术优缺点
6.1 优点
- SEO优化：前面已经说过，Angular SSR能让搜索引擎轻松抓取页面内容，提高网站在搜索引擎中的排名。
- 首屏加载速度快：在服务器端渲染好页面，浏览器直接显示，减少了用户等待时间，提高了用户体验。
- 兼容性好：对于一些不支持JavaScript的设备，也能正常显示页面内容。
6.2 缺点
- 服务器压力大：服务器需要执行Angular应用，渲染页面，这会增加服务器的负载。
- 开发复杂度高：相比传统的客户端渲染，Angular SSR的开发和调试会更复杂一些。
七、注意事项
7.1 服务器配置
由于Angular SSR会增加服务器的负载，所以需要合理配置服务器。可以使用负载均衡、缓存等技术来减轻服务器压力。
7.2 代码优化
在开发Angular SSR项目时，要注意代码的优化。避免在服务器端执行一些不必要的操作，减少服务器的计算量。
7.3 调试和测试
Angular SSR的调试和测试会比传统的客户端渲染复杂一些。要使用合适的工具和方法进行调试和测试，确保项目的稳定性。
八、文章总结
Angular服务端渲染（SSR）是解决SEO不友好和首屏加载白屏问题的有效方案。它通过在服务器端渲染页面，让搜索引擎能够轻松抓取页面内容，提高网站在搜索引擎中的排名，同时也能大大提高首屏加载速度，给用户更好的体验。虽然Angular SSR有一些缺点，比如服务器压力大、开发复杂度高，但只要合理配置服务器、优化代码、做好调试和测试，就能充分发挥它的优势。在实际应用中，内容型网站、电商网站、企业官网等都可以考虑使用Angular SSR来提升网站的性能和用户体验。
Comments