从零搭建到部署:Angular与Angular Universal手把手教你实现服务器端渲染(SSR),全面解析及实战指南助你提升Web应用性能与SEO优化效果

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介: 【8月更文挑战第31天】服务器端渲染(SSR)是现代Web开发的关键技术,能显著提升SEO效果及首屏加载速度,改善用户体验。Angular Universal作为官方SSR解决方案,允许在服务器端生成静态HTML文件。本文通过具体示例详细介绍如何使用Angular Universal实现SSR,并分享最佳实践。首先需安装Node.js和npm。

服务器端渲染(Server-Side Rendering,简称SSR)是现代Web开发中的一项重要技术,它允许在服务器上生成HTML页面,然后将这些页面发送给浏览器进行展示。这对于SEO优化、提高首屏加载速度以及改善用户体验都有着显著的好处。Angular Universal 是 Angular 官方提供的 SSR 解决方案,它允许 Angular 应用在服务器端运行并生成静态 HTML 文件。本文将通过具体示例,详细介绍如何使用 Angular Universal 实现 Angular 应用的服务器端渲染,并分享最佳实践。

首先,确保你的开发环境中已经安装了 Node.js 和 npm。接下来,我们将使用 Angular CLI 创建一个新的 Angular 项目:

ng new angular-universal-example
cd angular-universal-example

然后,我们需要安装 Angular Universal 相关的依赖包:

npm install --save @nguniversal/express-engine @nguniversal/module-map-ngfactory-loader
npm install --save-dev @nguniversal/builders

@nguniversal/express-engine 用于在 Express 服务器中渲染 Angular 应用,@nguniversal/module-map-ngfactory-loader 用于加载 Angular 组件工厂,而 @nguniversal/builders 提供了 Angular CLI 插件来支持 SSR 构建。

接下来,配置 Angular CLI 使用 Angular Universal 进行 SSR 构建。编辑 angular.json 文件,添加 serverprerender 任务:

"architect": {
   
  "build": {
   },
  "serve": {
   },
  "server": {
   
    "builder": "@nguniversal/builders:webpack",
    "options": {
   
      "project": "angular-universal-example-server"
    },
    "configurations": {
   
      "production": {
   
        "optimization": true,
        "outputHashing": "all",
        "fileReplacements": [
          {
   
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.prod.ts"
          }
        ]
      }
    }
  },
  "prerender": {
   
    "builder": "@nguniversal/nextjs-craftsman:prerender",
    "options": {
   
      "routes": ["/", "/about"]
    },
    "dependencies": ["server"]
  }
}

这里我们定义了两个新的目标:server 用于构建服务器端应用,prerender 用于预渲染静态页面。

接下来,创建服务器端应用。在项目根目录下运行以下命令:

ng generate @nguniversal:server --project=angular-universal-example

这将生成一个名为 angular-universal-example-server 的项目,并在 projects 文件夹下创建服务器端代码。

现在,我们需要设置一个 Express 服务器来托管和渲染 Angular 应用。在项目根目录下创建一个名为 server.ts 的文件,并添加以下内容:

import 'reflect-metadata';
import * as express from 'express';
import {
    join } from 'path';
import {
    AppServerModuleNgFactory, LAZY_MODULE_MAP } from './dist/server/main';
import {
    renderModuleFactory } from '@angular/platform-express';
import {
    provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

async function bootstrap() {
   
  const app = express();

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  app.engine('html', (_, options, callback) => {
   
    renderModuleFactory(AppServerModuleNgFactory, {
   
      document: options.req.rawHeaders[1],
      url: options.req.url,
      // The bootstrap mechanism for Angular apps
      extraProviders: [provideModuleMap(LAZY_MODULE_MAP)]
    }).then(html => {
   
      callback(null, html);
    });
  });

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

  // Example Express Rest API endpoints
  // app.get('/api/**', (req, res) => { /* ... */ });

  // Serve static files from /browser
  app.get('*.*', express.static(join(process.cwd(), 'dist/browser')));

  // All regular routes use the Universal engine
  app.get('*', (req, res) => {
   
    res.render('index', {
    req });
  });

  // Start up the Node server
  app.listen(process.env.PORT || 4000);

  console.log(`Node Express server listening on http://localhost:${
     process.env.PORT || 4000}`);
}

bootstrap();

这段代码设置了一个 Express 服务器,并使用 renderModuleFactory 来渲染 Angular 应用。我们还设置了静态文件服务,以便客户端 JavaScript 文件和其他资源可以从浏览器目录中提供。

最后,构建并启动服务器:

ng run angular-universal-example:server --prod

这将构建服务器端应用,并生成 dist/server 目录下的文件。然后,你可以通过运行 node dist/server/main.js 来启动服务器。

通过上述步骤,我们成功地将 Angular 应用转换为了支持服务器端渲染的形式。这种方法不仅提高了应用的性能,还增强了搜索引擎的友好性。希望本文提供的代码示例和实践指南能够帮助你在实际项目中更好地应用 Angular Universal 技术,提升应用的用户体验。

相关文章
|
18天前
|
存储 缓存 运维
阿里云服务器经济型e与通用算力型u1实例各自性能、适用场景区别及选择参考
在选择阿里云服务器实例规格时,经济型e实例和通用算力型u1实例因其高性价比和广泛适用性,备受个人开发者、中小企业的青睐。在同地域、相同配置的情况下,经济型e和通用算力型u1实例的价格相对于其他实例规格要低一些,很多个人和初创企业用户都会优先考虑选择这两个实例规格的云服务器,那么它们之间有什么区别?各自的性能、适用场景上有何区别?我们应该如何选择呢?本文将详细解析这两款实例的性能特点、适用场景、价格优势及购买建议,帮助用户更好地理解并选择合适的云服务器实例。
|
10天前
|
存储 分布式计算 安全
阿里云服务器经济型、通用算力型、计算型、通用型各主要实例性能、适用场景对比
在阿里云目前的活动中,云服务器实例规格有几大类,分别是轻量应用服务器、经济型e实例、通用算力型u1实例,第七代计算型c7、通用型g7、内存型r7实例,第八代计算型c8i、通用型g8i、内存型r8i实例,倚天云服务器实例计算型c8y、通用型g8y、内存型r8y实例,不同类型的实例规格,性能和适用场景不同,本文将这些热门实例规格的性能和适用场景全部展示出来,以供大家做对比和选择参考,从而选择出适合自己需求的云服务器实例规格。
|
11天前
|
存储 缓存 安全
阿里云服务器通用算力型u1实例怎么样?实例性能与测评结果参考
本文将通过性能评测、适用场景、特点介绍、实测数据分享以及最新活动价格等多个方面,全方位解析这款云服务器实例,以供用户了解和参考。
|
1月前
|
缓存 Ubuntu Linux
Linux环境下测试服务器的DDR5内存性能
通过使用 `memtester`和 `sysbench`等工具,可以有效地测试Linux环境下服务器的DDR5内存性能。这些工具不仅可以评估内存的读写速度,还可以检测内存中的潜在问题,帮助确保系统的稳定性和性能。通过合理配置和使用这些工具,系统管理员可以深入了解服务器内存的性能状况,为系统优化提供数据支持。
41 4
|
1月前
|
存储 机器学习/深度学习 编解码
阿里云服务器计算型c8i实例解析:实例规格性能及使用场景和最新价格参考
计算型c8i实例作为阿里云服务器家族中的重要成员,以其卓越的计算性能、稳定的算力输出、强劲的I/O引擎以及芯片级的安全加固,广泛适用于机器学习推理、数据分析、批量计算、视频编码、游戏服务器前端、高性能科学和工程应用以及Web前端服务器等多种场景。本文将全面介绍阿里云服务器计算型c8i实例,从规格族特性、适用场景、详细规格指标、性能优势、实际应用案例,到最新的活动价格,以供大家参考。
|
13天前
|
存储 Oracle 固态存储
阿里云服务器ESSD云盘性能级别详解
存储性能对于应用的运行效率和用户体验至关重要,阿里云作为领先的云服务提供商,为用户提供了多种存储解决方案,其中ESSD云盘以其高性能和灵活性备受关注。本文将详细介绍阿里云服务器ESSD云盘的四种性能级别——PL0、PL1、PL2和PL3,以及它们各自的单盘IOPS性能上限和容量大小等关键信息,帮助您更好地选择适合自身需求的存储方案。
|
1月前
|
存储 弹性计算 缓存
阿里云服务器通用型g8i实例性能与使用场景介绍及最新收费标准参考
阿里云ECS通用型g8i服务器采用阿里云全新CIPU架构,可提供稳定的算力输出、更强劲的I/O引擎以及芯片级的安全加固。ECS通用型g8i实例支持开启或关闭超线程配置,单台g8i实例最高支持100万IOPS。阿里云ECS通用型g8i实例CPU采用Intel®Xeon®Emerald Rapids或者Intel®Xeon®Sapphire Rapids,主频不低于2.7 GHz,全核睿频3.2GHz。本文为大家介绍通用型g8i实例性能与使用场景介绍及最新收费标准,以供参考。
|
1月前
|
人工智能 弹性计算 编解码
阿里云GPU云服务器性能、应用场景及收费标准和活动价格参考
GPU云服务器作为阿里云提供的一种高性能计算服务,通过结合GPU与CPU的计算能力,为用户在人工智能、高性能计算等领域提供了强大的支持。其具备覆盖范围广、超强计算能力、网络性能出色等优势,且计费方式灵活多样,能够满足不同用户的需求。目前用户购买阿里云gpu云服务器gn5 规格族(P100-16G)、gn6i 规格族(T4-16G)、gn6v 规格族(V100-16G)有优惠,本文为大家详细介绍阿里云gpu云服务器的相关性能及收费标准与最新活动价格情况,以供参考和选择。
|
1月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
52 3
|
1月前
|
数据采集 前端开发 搜索推荐

热门文章

最新文章