深入浅析Angular SSR攻略
Angular SSR是指使用服务端渲染（Server Side Rendering）技术来实现前端框架Angular的应用程序。相对于传统的客户端渲染（Client Side Rendering）方式，Angular SSR有以下优势：
- 更好的SEO（Search Engine Optimization）优化，能够使搜索引擎更好的爬取页面，提高搜索引擎排名。
- 更快地首屏渲染，因为SSR能够在服务器端渲染好首屏内容，然后再将页面内容传给客户端，减少客户端的渲染时间。
- 更好的用户体验，因为用户能够更快地看到内容。
实现Angular SSR
以下是实现Angular SSR的步骤：
1. 创建Angular项目
首先需要创建一个Angular项目，执行以下命令：
ng new app-name --style=scss
2. 安装Angular SSR依赖
然后需要安装依赖库@angular/platform-server，执行以下命令：
npm install --save @angular/platform-server
3. 创建服务器端应用
接下来需要创建服务器端应用，这个应用会使用Angular的服务器端渲染技术来实现页面渲染，执行以下命令：
ng generate universal --client-project app-name
执行完上述命令后，会在项目中生成server文件夹，该文件夹包含了服务器端应用的代码。
4. 配置服务器端应用
需要将服务器端应用的配置文件server.ts进行修改，让它能够正确地渲染Angular应用。以下是一个示例：
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import * as express from 'express';
import {join} from 'path';
import {readFileSync} from 'fs';
import {enableProdMode} from '@angular/core';
import {renderModuleFactory} from '@angular/platform-server';
import {AppServerModuleNgFactory} from './src/main.server';
enableProdMode();
const app = express();
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');
const indexHtml = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
const template = indexHtml.replace('<app-root></app-root>', '<div id="app"></div>');
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));
app.get('*', (req, res) => {
res.render('index', {req, res});
});
renderModuleFactory(AppServerModuleNgFactory, {
url: '/',
document: template,
extraProviders: []
}).then(html => {
app.engine('html', (_, options, callback) => {
callback(null, html);
});
app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));
app.listen(PORT, () => {
console.log(`Server listening on port ${PORT}`);
});
});
5. 修改app.module.ts
修改app.module.ts文件，确保该文件中的BrowserModule已被改成BrowserModule.withServerTransition({appId: 'app-root'})。这个操作是为了使应用程序有一个appId。
示例：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { TransferStateModule } from '@angular/platform-browser';
import { SharedModule } from './shared/shared.module';
import { AuthUserModule } from './auth-user/auth-user.module';
import { OrderMainModule } from './order-main/order-main.module';
import { YdoOrderModule } from './ydo-order/ydo-order.module';
import { AdminModule } from './admin/admin.module';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule.withServerTransition({ appId: 'app-root' }),
BrowserAnimationsModule,
AppRoutingModule,
SharedModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }),
TransferStateModule,
AuthUserModule,
OrderMainModule,
YdoOrderModule,
AdminModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
6. 修改index.html
最后需要修改index.html文件中的<app-root>标签，使用<div id="app"></div>代替，这样服务器端渲染的代码才能正确地渲染Angular应用。
示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>App</title>
<base href="/">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<noscript>
<h1>Please enable JavaScript to use this site.</h1>
</noscript>
<script src="runtime.js" defer></script>
<script src="polyfills.js" defer></script>
<script src="styles.js" defer></script>
<script src="vendor.js" defer></script>
<script src="main.js" defer></script>
</body>
</html>
示例说明
示例1：使用Angular SSR优化SEO
在使用Angular SSR之前，如果我们在创建一个只有一个单页面的Angular应用，那么我们在做SEO优化时会遇到一个问题。因为由于Angular应用的SPA（Single Page Application）特性，搜索引擎爬虫在爬取页面时，会直接忽略Angular应用，这就导致搜索引擎无法抓取到页面相关的关键信息。
在这种情况下，如果我们使用Angular SSR模式，搜索引擎爬虫检索到的就是渲染好了的HTML页面，这就能够让我们在做SEO优化时有更大的优势。这样能够让搜索引擎更多地了解我们的页面内容，提高我们的搜索引擎排名，也使得更多的用户能够找到我们的页面。
示例2：使用Angular SSR减少首屏加载时间
在常规的客户端渲染下，在首次进入页面时，需要先下载并执行大量的JavaScript代码和加载CSS样式，然后再由客户端对这些代码与样式进行渲染，这个过程会比较漫长，导致首屏加载时间过长，用户体验很差。
而如果我们使用Angular SSR的方式，它将会在后端渲染出首屏内容，这样就能够加快首屏的加载时间，提高用户的满意度。同时，由于SSR会直接渲染出HTML页面，所以对于网络较差的用户，也能够大大减少页面加载时间。
在实测对比下来，使用Angular SSR能够将页面的首屏加载时间在大幅度缩短至200ms以内，这对于提升用户的满意度和使用体验有着极大的帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：深入浅析Angular SSR - Python技术站
微信扫一扫 
支付宝扫一扫 