首页 > 其他分享 >什么是 Angular 应用服务器端的预渲染技术 - prerendering

什么是 Angular 应用服务器端的预渲染技术 - prerendering

时间:2023-10-03 18:35:54浏览次数:35  
标签:服务器端 渲染 prerendering app import 应用服务器 Angular 页面

Angular 服务器端预渲染(Server Prerendering):构建更快速、更友好的Web应用

Angular是一种强大的前端框架,用于构建现代Web应用程序。然而,随着应用规模的增长,性能问题也可能随之而来。为了提高Angular应用的性能和用户体验,开发人员可以采用各种技术和方法。其中之一就是服务器端预渲染(Server Prerendering),本文将详细介绍这一概念,并提供示例来说明其用途和优势。

什么是服务器端预渲染?

服务器端预渲染,通常简称为“SSR”(Server-Side Rendering),是一种用于改善Web应用性能和搜索引擎优化(SEO)的技术。它与传统的客户端渲染(Client-Side Rendering)相对立。在客户端渲染中,应用的初始化和渲染发生在用户的浏览器中,而在服务器端预渲染中,应用的初始化和部分渲染发生在服务器上。这意味着在将HTML发送到浏览器之前,服务器会在后端执行一些Angular应用的初始渲染工作,以生成已渲染的HTML页面。这个HTML页面可以直接呈现给用户,而不需要等待JavaScript加载和执行。

服务器端预渲染的主要优势在于:

  1. 更快的加载时间:由于服务器在后端执行初始渲染,用户可以更快地看到内容。这对于提高用户体验至关重要,尤其是在低带宽或性能有限的设备上。

  2. SEO友好:搜索引擎爬虫可以更容易地索引和理解已经渲染的HTML页面,从而提高了应用在搜索结果中的排名。这对于在线业务来说非常重要。

  3. 更好的性能:减少了客户端渲染所需的工作量,使浏览器可以更快地加载和交互。这对于减少跳出率和提高用户留存率非常有帮助。

下面,我们将通过一个具体的示例来演示服务器端预渲染是如何工作的。

示例:Angular服务器端预渲染

在这个示例中,我们将使用Angular框架和Angular Universal库来实现服务器端预渲染。假设我们正在构建一个博客网站,其中包含文章列表和文章详细信息页面。

步骤1:创建Angular应用

首先,我们创建一个基本的Angular应用。我们可以使用Angular CLI来快速生成项目骨架:

ng new my-blog-app

步骤2:安装Angular Universal

接下来,我们需要安装Angular Universal库,它将帮助我们实现服务器端预渲染。在项目根目录下执行以下命令:

ng add @nguniversal/express-engine

这个命令会自动为我们配置Angular Universal,并生成服务器端渲染所需的文件和代码。

步骤3:创建预渲染路由

在Angular Universal中,我们需要定义哪些路由应该在服务器端进行预渲染。例如,我们可能希望文章详细信息页面在服务器端进行预渲染,以提供更快的加载时间和SEO优化。我们可以通过编辑src/app/app.server.module.ts文件来定义预渲染路由:

// app.server.module.ts

import { NgModule } from '@angular/core';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ModuleMapLoaderModule,
    ServerTransferStateModule,
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

步骤4:创建预渲染服务

接下来,我们创建一个预渲染服务,该服务将在服务器端执行初始渲染并生成HTML页面。我们可以在src/app/prerender.service.ts文件中创建这个服务:

// prerender.service.ts

import { Injectable } from '@angular/core';
import { renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common';
import { createServerRenderer, RenderResult } from 'aspnet-prerendering';

import { AppServerModule } from './app.server.module';

enableProdMode();

@Injectable({ providedIn: 'root' })
export class PrerenderService {
  public async render(params: any): Promise<RenderResult> {
    const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = AppServerModule;
    const options = {
      document: params.data.originalHtml,
      url: params.url,
      extraProviders: [
        { provide: APP_BASE_HREF, useValue: params.baseUrl },
        { provide: 'BASE_URL', useValue: params.origin + params.baseUrl },
      ],
    };

    const renderModule = createServerRenderer((moduleFactory: any) => {
      return renderModuleFactory(moduleFactory, options);
    });

    return new Promise<RenderResult>((resolve, reject) => {
      renderModule(AppServerModuleNgFactory, {
        document: params.data.originalHtml,
        url: params.url,
      }).then((html: string) => {
        resolve({ html });
      }, reject);
    });
  }
}

步骤5:使用预渲染服务

最后,我们在服务器端路由处理程序中使用预渲染服务来处理特定路由。这是一个示例Express.js路由处理程序的代码:

// server.ts

import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import { enableProdMode } from '@angular/core';
import * as express from 'express';
import { ngExpressEngine } from '@nguniversal/

express-engine';
import { join } from 'path';
import { AppServerModule } from './src/main.server';

enableProdMode();

const app = express();

app.engine(
  'html',
  ngExpressEngine({
    bootstrap: AppServerModule,
  })
);

app.set('view engine', 'html');
app.set('views', join(__dirname, 'dist/browser'));

app.get('*.*', express.static(join(__dirname, 'dist/browser')));

app.get('*', (req, res) => {
  // 使用预渲染服务处理请求
  const prerenderService = new PrerenderService();
  prerenderService
    .render({
      url: req.url,
      baseUrl: '/',
      origin: req.protocol + '://' + req.get('host'),
      data: {
        originalHtml: '',
      },
    })
    .then(({ html }) => {
      res.render('index', { req, res, html });
    })
    .catch((error) => {
      console.error(error);
      res.status(500).send('Internal Server Error');
    });
});

app.listen(3000, () => {
  console.log(`Server is listening on port 3000`);
});

在上述代码中,我们使用Angular Universal的ngExpressEngine来处理路由,并在需要预渲染的路由上使用PrerenderService

预渲染(Prerendering)是一种在服务器端对页面进行渲染的技术,它可以在用户请求页面时快速提供完全渲染的页面,以提高用户体验和搜索引擎优化(SEO)。

对于 Angular 或其他单页应用(SPA),它们在客户端进行大量的 JavaScript 运行以呈现页面。这意味着,当用户首次请求页面时,他们需要下载大量的 JavaScript,然后浏览器才能开始渲染页面。这会导致用户在看到完全渲染的页面之前需要等待一段时间,这可能会对用户体验产生负面影响。此外,许多搜索引擎的爬虫在索引页面时可能无法完全执行 JavaScript,这可能会导致页面的 SEO 排名降低。

预渲染可以解决这些问题。当我们在服务器端进行预渲染时,我们在用户请求页面时已经生成了完全渲染的 HTML。这意味着用户可以立即看到完全渲染的页面,而不需要等待 JavaScript 在客户端运行。此外,预渲染的页面对搜索引擎的爬虫更友好,因为它们可以直接读取已渲染的 HTML,而无需执行 JavaScript。

以 Angular Universal 为例,它是 Angular 的一个关键部分,用于在服务器端进行预渲染。以下是一个基本的 Angular Universal 预渲染的示例:

首先,我们需要安装 Angular Universal 的依赖项:

ng add @nguniversal/express-engine

这将为我们的 Angular 项目添加必要的服务器端渲染(SSR)支持。

然后,在我们的 Angular 服务中,我们可以使用 renderModuleFactory 函数来预渲染我们的应用。这个函数将 Angular 模块工厂和一些选项作为参数,并返回一个已渲染的 HTML 字符串。

import { renderModuleFactory } from '@angular/platform-server';
import { AppServerModuleNgFactory } from './app/app.server.module.ngfactory';

const html = await renderModuleFactory(AppServerModuleNgFactory, {
  document: '<app-root></app-root>',
  url: '/'
});

在这个例子中,AppServerModuleNgFactory 是我们应用的服务器端版本,document 是我们要预渲染的 HTML 模板,url 是我们要渲染的路由。

当我们的服务器接收到用户的请求时,它可以运行上述代码来生成预渲染的 HTML,然后将这个 HTML 发送给用户。用户的浏览器可以立即显示这个 HTML,然后在后台下载和运行 JavaScript,以便用户可以与页面进行交互。

结论

服务器端预渲染是一种强大的技术,可以显著改善Angular应用的性能和SEO。通过将初始渲染移到服务器端,我们可以实现更快的加载时间、更好的用户体验和更好的搜索引擎排名。虽然设置服务器端预渲染可能需要一些额外的工作,但它可以带来巨大的回报,特别是对于那些需要处理大量内容和重要SEO的Web应用。

希望本文提供了对Angular服务器端预渲染的详细理解,并通过示例演示了如何实施它。无论是构建博客网站还是复杂的企业应用,服务器端预渲染都是一个值得考虑的选项,可以显著提升用户体验和应用性能。如果您使用Angular构建Web应用,不妨考虑采用服务器端预渲染来优化您的应用。

标签:服务器端,渲染,prerendering,app,import,应用服务器,Angular,页面
From: https://www.cnblogs.com/sap-jerry/p/17741435.html

相关文章

  • Angular 应用里环境变量 SERVER_REQUEST_ORIGIN 的含义
    SERVER_REQUEST_ORIGIN是一个在Angular应用中用于管理服务器请求来源的环境变量。在本文中,我将详细介绍这个环境变量的含义、作用以及如何在Angular应用中使用它。首先,让我们理解一下这个环境变量的背景和重要性。1.Angular应用和环境变量Angular是一个流行的前端框架,用......
  • 什么是 Angular 14 的 strict typing of Angular Reactive Forms
    Angular14引入的"stricttypingofAngularReactiveForms"是一项强大的功能,它进一步提高了Angular应用程序的类型安全性和可维护性,特别是在处理表单时。这个功能使开发人员能够更精确地定义表单控件和表单模型的类型,从而减少了潜在的运行时错误,并提供了更好的代码提示和文......
  • Angular inlineCriticalCss 和内部函数 walkStyleRules 介绍
    有一个客户启用了AngularServerSideRendering,并且启用了inlineCriticalCss,后来发现在Dynatrace的hotspot里的vendor.js文件有个名叫walkStyleRules的函数,耗时比较多。如下图所示:Angular服务器端渲染(ServerSideRendering)Angular的服务器端渲染是一种技术,允许在......
  • 什么是 Angular 企业级应用开发中的 Breaking Change
    Angular是一种流行的前端开发框架,它经常会发布新版本,以改进性能、增加新功能和修复错误。然而,随着新版本的发布,可能会引入一些不兼容的更改,这被称为"BreakingChange"。BreakingChange是指在应用程序升级到新版本时,可能导致现有代码无法正常工作的变更。本文将深入探讨Angula......
  • Angular 应用构建完成后 vendor.js 文件的使用场合
    vendor.js文件的来源、作用和使用场合vendor.js文件是Angular应用中的一个重要文件,它承担了许多关键任务,包括管理应用的依赖关系、提供框架核心功能以及优化构建。本文将详细介绍vendor.js的来源、作用和使用场合,并通过示例来阐述。来源vendor.js文件的来源可以追溯到Angular应......
  • 什么是 Angular Tree Shaking 优化机制
    TreeShaking(树摇)是一种在现代JavaScript开发中广泛使用的优化技术,它的目标是消除未使用的代码,以减小应用程序的文件体积。TreeShaking的概念和实现是在JavaScript生态系统中非常重要的一部分,尤其是在构建工具如Webpack和Rollup中。TreeShaking的背景知识为了更好地理解......
  • 什么是 Angular 的 outlet
    Outlet是Angular框架中的一个关键概念,用于在视图层次结构中动态加载和渲染组件。在本文中,我将详细介绍什么是Outlet,并提供详细的示例来说明其用法和作用。什么是Outlet?Outlet是Angular中的一个指令,它用于动态加载和渲染组件。它通常与路由器(Router)一起使用,允许我们根据导航的路......
  • 什么是 Angular Ahead-of-time (AOT) compilation
    Ahead-of-time(AOT)编译是Angular框架的一个重要特性,它在构建和优化应用程序时发挥着关键作用。AOT编译是一种将AngularTypeScript代码和模板转换为高效的JavaScript和HTML的过程,通常在构建过程中执行,而不是在运行时。本文将深入探讨Ahead-of-time编译的概念、原理......
  • Angular ModuleWithProviders 类型的使用场景介绍
    import{ModuleWithProviders}from'@angular/core'这行代码在Angular中有着重要的作用,它引入了ModuleWithProviders类型从@angular/core模块中。为了更好地理解这行代码的作用,我们需要深入探讨Angular中模块(Modules)的概念以及如何使用ModuleWithProviders类型。Angula......
  • Angular APP_INITIALIZER Injection Token 的使用方法介绍
    import{APP_INITIALIZER}from'@angular/core'这行代码在Angular中的作用是导入名为APP_INITIALIZER的常量,它来自Angular核心模块@angular/core。APP_INITIALIZER是一个重要的Angular特性,它用于执行一系列初始化操作,通常用于配置应用程序之前执行一些必要的任务。......