Angular中的SSR怎么使用

这篇文章主要介绍“Angular中的SSR怎么使用”，在日常操作中，相信很多人在Angular中的SSR怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Angular中的SSR怎么使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！ 虽然现在包括 Google 在内的某些搜索引擎和社交媒体声称已经能支持对由 JavaScript（JS）驱动的 SPA（Single-Page Application）应用进行爬取，但是结果似乎差强人意。静态 HTML 网站的 SEO 表现还是要好于动态网站，这也是 Angular 官网所持有的观点（Angular 可是 Google 的！）。Universal 可以生成无 JS 的静态版本的应用程序，对搜索、外链、导航的支持更好。某些移动端设备可能不支持 JS 或者对 JS 的支持非常有限，导致网站的访问体验非常差。这种情况下，我们需要提供无 JS 版本的应用，以便为用户提供更好的体验。对于用户的使用体验来说，首页展示速度的快慢至关重要。根据 eBay 的数据，搜索结果的展示速度每提高 100 毫秒，“添加至购物车”的使用率就提高 0.5%。使用了 Universal 之后，应用程序的首页会以完整的形态展示给用户，这是纯的 HTML 网页，即使不支持 JS，也可以展示。此时，网页虽然不能处理浏览器的事件，但是支持通过 routerLink 进行跳转。这么做的好处是，我们可以先用静态网页抓住用户的注意力，在用户浏览网页的时候，同时加载整个 Angular 应用。这给了用户一个非常好的极速加载的体验。Angular CLI 可以帮助我们非常便捷的将一个普通的 Angular 项目转变为一个带有 SSR 的项目。创建服务端应用只需要一个命令：

ngadd@nguniversal/express-engine

建议在运行该命令之前先提交所有的改动。这个命令会对项目做如下修改：添加服务端文件：main.server.ts – 服务端主程序文件app/app.server.module.ts – 服务端应用程序主模块tsconfig.server.json – TypeScript 服务端配置文件server.ts – Express web server 的运行文件修改的文件：package.json – 添加 SSR 所需要的依赖和运行脚本angular.json – 添加开发、构建 SSR 应用所需要的配置在 package.json 中，会自动添加一些 npm 脚本：dev:ssr 用于在开发环境运行 SSR 版本；serve:ssr 用于直接运行 build 或 prerender 后的网页；build:ssr 构建 SSR 版本的网页；prerender 构建预渲染后的网页，与 build 不同，这里会根据提供的 routes 生成这些页面的 HTML 文件。由于 Universal 应用不是在浏览器中执行，因此一些浏览器的 API 或功能将不可用。例如，服务端应用是无法使用浏览器中的全局对象 window、document，navigator，location。Angular 提供了两个可注入对象，用于在服务端替换对等的对象：Location 和 DOCUMENT。例如，在浏览器中，我们通过 window.location.href 获取当前浏览器的地址，而改成 SSR 之后，代码如下：

import{Location}from'@angular/common';

exportclassAbmNavbarComponentimplementsOnInit{
//ctor中注入Location
constructor(private_location:Location){
//...
}

ngOnInit(){
//打印当前地址
console.log(this._location.path(true));
}
}

同样，对于在浏览器使用 document.getElementById() 获取 DOM 元素，在改成 SSR 之后，代码如下：

import{DOCUMENT}from'@angular/common';

exportclassAbmFoxComponentimplementsOnInit{
//ctor中注入DOCUMENT
constructor(@Inject(DOCUMENT)private_document:Document){}

ngOnInit(){
//获取id为fox-container的DOM
constcontainer=this._document.getElementById('fox-container');
}
}

在 Angular SSR 应用中，HTTP 请求的 URL 地址必须为 绝对地址（即，以 http/https 开头的地址，不能是相对地址，如 /api/heros）。Angular 官方推荐将请求的 URL 全路径设置到 renderModule() 或 renderModuleFactory() 的 options 参数中。但是在 v14 自动生成的代码中，并没有显式调用这两个方法的代码。而通过读 Http 请求的拦截，也可以达到同样的效果。下面我们先准备一个拦截器，假设文件位于项目的 shared/universal-relative.interceptor.ts 路径：

import{HttpHandler,HttpInterceptor,HttpRequest}from'@angular/common/http';
import{Inject,Injectable,Optional}from'@angular/core';
import{REQUEST}from'@nguniversal/express-engine/tokens';
import{Request}from'express';

//忽略大小写检查
conststartsWithAny=(arr:string[]=[])=>(value='')=>{
returnarr.some(test=>value.toLowerCase().startsWith(test.toLowerCase()));
};

//http,https,相对协议地址
constisAbsoluteURL=startsWithAny(['http','//']);

@Injectable()
exportclassUniversalRelativeInterceptorimplementsHttpInterceptor{
constructor(@Optional()@Inject(REQUEST)protectedrequest:Request){}

intercept(req:HttpRequest,next:HttpHandler){
//不是绝对地址的URL
if(!isAbsoluteURL(req.url)){
letprotocolHost:string;
if(this.request){
//如果注入的REQUEST不为空，则从注入的SSRREQUEST中获取协议和地址
protocolHost=`${this.request.protocol}://${this.request.get(
'host'
)}`;
}else{
//如果注入的REQUEST为空，比如在进行prerenderbuild：
//这里需要添加自定义的地址前缀，比如我们的请求都是从abmcode.com来。
protocolHost='https://www.abmcode.com';
}
constpathSeparator=!req.url.startsWith('/')?'/':'';
consturl=protocolHost+pathSeparator+req.url;
constserverRequest=req.clone({url});
returnnext.handle(serverRequest);

}else{
returnnext.handle(req);
}
}
}

然后在 app.server.module.ts 文件中 provide 出来：

import{UniversalRelativeInterceptor}from'./shared/universal-relative.interceptor';
//...其他imports

@NgModule({
imports:[
AppModule,
ServerModule,
//如果你用了@angular/flext-layout，这里也需要引入服务端模块
FlexLayoutServerModule,
],
免费云主机、域名
providers:[
{
provide:HTTP_INTERCEPTORS,
useClass:UniversalRelativeInterceptor,
multi:true
}
],
bootstrap:[AppComponent],
})
exportclassAppServerModule{}

这样任何对于相对地址的请求都会自动转换为绝对地址请求，在 SSR 的场景下不会再出问题。经过上面的步骤后，如果我们通过 npm run build:ssr 构建项目，你会发现在 dist//browser 下面只有 index.html 文件，打开文件查看，发现其中还有 这样的元素，也就是说你的网页内容并没有在 html 中生成。这是因为 Angular 使用了动态路由，比如 /product/:id 这种路由，而页面的渲染结果要经过 JS 的执行才能知道，因此，Angular 使用了 Express 作为 Web 服务器，能在服务端运行时根据用户请求（爬虫请求）使用模板引擎生成静态 HTML 界面。而 prerender（npm run prerender）会在构建时生成静态 HTML 文件。比如我们做企业官网，只有几个页面，那么我们可以使用预渲染技术生成这几个页面的静态 HTML 文件，避免在运行时动态生成，从而进一步提升网页的访问速度和用户体验。需要进行预渲染（预编译 HTML）的网页路径，可以有几种方式进行提供：通过命令行的附加参数:

如果路径比较多，比如针对 product/:id 这种动态路径，则可以使用一个路径文件：routes.txt

然后在命令行参数指定该文件：

在项目的 angular.json 文件配置需要的路径：

配置完成后，重新执行预渲染命令（npm run prerender 或者使用命令行参数则按照上面中的命令执行），编译完成后，再打开 dist//browser 下的 index.html 会发现里面没有 了，取而代之的是主页的实际内容。同时也生成了相应的路径目录以及各个目录下的 index.html 子页面文件。SEO 的关键在于对网页 title，keywords 和 description 的收录，因此对于我们想要让搜索引擎收录的网页，可以修改代码提供这些内容。在 Angular 14 中，如果路由界面通过 Routes 配置，可以将网页的静态 title 直接写在路由的配置中：

{path:'home',component:AbmHomeComponent,title:''},

另外，Angular 也提供了可注入的 Title 和 Meta 用于修改网页的标题和 meta 信息：

import{Meta,Title}from'@angular/platform-browser';

exportclassAbmHomeComponentimplementsOnInit{

constructor(
private_title:Title,
private_meta:Meta,
){}

ngOnInit(){
this._title.setTitle('');
this._meta.addTags([
{name:'keywords',content:''},
{name:'description',content:''}
]);
}
}

到此，关于“Angular中的SSR怎么使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注云技术网站，小编会继续努力为大家带来更多实用的文章！

相关推荐: vue怎么全局替换div值

本文小编为大家详细介绍“vue怎么全局替换div值”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue怎么全局替换div值”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。 首先，我们需要创建一个简单的 Vue 实例，并将其绑定到一个…