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

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 【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 技术,提升应用的用户体验。

相关文章
|
6天前
|
运维 负载均衡 安全
深度解析:Python Web前后端分离架构中WebSocket的选型与实现策略
深度解析:Python Web前后端分离架构中WebSocket的选型与实现策略
31 0
|
3天前
|
JavaScript 前端开发 开发者
Vue执行流程及渲染解析
【10月更文挑战第2天】
|
22天前
|
存储 弹性计算 缓存
阿里云服务器ECS通用型实例规格族特点、适用场景、指标数据解析
阿里云服务器ECS提供了多种通用型实例规格族,每种规格族都针对不同的计算需求、存储性能、网络吞吐量和安全特性进行了优化。以下是对存储增强通用型实例规格族g8ise、通用型实例规格族g8a、通用型实例规格族g8y、存储增强通用型实例规格族g7se、通用型实例规格族g7等所有通用型实例规格族的详细解析,包括它们的核心特点、适用场景、实例规格及具体指标数据,以供参考。
阿里云服务器ECS通用型实例规格族特点、适用场景、指标数据解析
|
3天前
|
弹性计算 网络协议 Ubuntu
如何在阿里云国际版Linux云服务器中自定义配置DNS
如何在阿里云国际版Linux云服务器中自定义配置DNS
|
4天前
|
存储 弹性计算 固态存储
阿里云服务器Entry云盘和ESSD Entry云盘区别、性能参数及使用常见问题参考
在我们选择阿里云服务器的时候,有部分云服务器同时支持ESSD Entry云盘和ESSD云盘,有的初次接触阿里云服务器云盘的用户可能还不是很清楚他们之间的区别,因此不知道选择哪种更好更能满足自己场景的需求,本文为大家介绍一下阿里云服务器Entry云盘和ESSD Entry云盘各自的性能参数区别及使用过程中的一些常见问题,以供选择参考。
|
4天前
|
Java PHP
PHP作为广受青睐的服务器端脚本语言,在Web开发中占据重要地位。理解其垃圾回收机制有助于开发高效稳定的PHP应用。
【10月更文挑战第1天】PHP作为广受青睐的服务器端脚本语言,在Web开发中占据重要地位。其垃圾回收机制包括引用计数与循环垃圾回收,对提升应用性能和稳定性至关重要。本文通过具体案例分析,详细探讨PHP垃圾回收机制的工作原理,特别是如何解决循环引用问题。在PHP 8中,垃圾回收机制得到进一步优化,提高了效率和准确性。理解这些机制有助于开发高效稳定的PHP应用。
18 3
ly~
|
5天前
|
网络协议 应用服务中间件 Apache
如何在 DNS 记录中设置反向代理服务器?
要设置反向代理服务器,首先需安装配置软件(如 Nginx 或 Apache),并确保域名正确指向服务器 IP。接着,在 DNS 中设置 A 或 CNAME 记录,将域名指向反向代理服务器。然后编辑 Nginx 或 Apache 的配置文件,将请求转发至后端服务器。最后,通过浏览器访问域名测试配置是否成功,并使用工具检查请求流向和响应情况。
ly~
17 3
|
26天前
阿里云服务器带宽价格参考:选择1M、3M、5M、10M宽带价格解析
阿里云服务器1M、3M、5M、10M宽带需要多少钱?单说阿里云服务器宽带多少钱,而不确定云服务器实例规格及cpu和内存配置的话,是没办法具体说多少钱的,因为云服务器的价格受很多因素影响。本文将详细解析阿里云服务器在选择1M、3M、5M、10M不同带宽下的价格差异,以供大家参考。
阿里云服务器带宽价格参考:选择1M、3M、5M、10M宽带价格解析
ly~
|
5天前
|
域名解析 网络协议 Linux
如何测试 DNS 记录中的反向代理服务器是否生效?
本文介绍了三种测试反向代理服务器配置的方法。首先,通过命令行工具如 `ping`、`nslookup` 和 `dig` 检查域名解析是否指向正确的 IP 地址。其次,利用 Web 浏览器访问域名,验证页面加载正常且请求头信息无误。最后,借助网络抓包工具如 `Wireshark` 和 `tcpdump` 分析数据包,确保请求正确转发并返回预期响应。
ly~
18 2
|
8天前
|
存储 缓存 监控
如何提高服务器CPU性能?
如何提高服务器CPU性能?
42 3

推荐镜像

更多