Angular 使用 @toolkit/universal 实现服务端渲染

最新推荐文章于 2022-11-22 15:23:45 发布
最新推荐文章于 2022-11-22 15:23:45 发布
阅读量1.1k 收藏
点赞数 2
分类专栏： angular

Angular 使用 @toolkit/universal 实现服务端渲染

SPA 的缺陷 — SEO

基本上所有现在大行其道的单页应用都存在这个问题，它们只在客户端运行和渲染，也许你会说：“单页明明就是这样设计的，这是优点而不是缺陷！”，
当然，你说的完全正确！现在的问题是你的应用“只在”客户端渲染和运行。

爬虫是怎样去爬取网页的？

问题在于搜索引擎的 机器人/爬虫 的工作类似于CURL命令。为什么呢？启动浏览器和执行JavaScript脚本是一项非常昂贵的操作，当你需要搜索成千上万网页时，没有时间和资源去做这样昂贵的操作。

让我们来创建一个简单的 angular 应用程序，看看爬虫是如何来爬去它的：

ng new myApp
cd myApp
ng serve

现在在另一个终端窗口中执行CURL命令并查看输出：

$ curl localhost:4200
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>

你看到问题了吗？我们在 Body 里面得到了什么? 什么有用的信息都没有，只有App Bootstrap node 和一些JavaScript。我们怎样解决呢？

服务端渲染 (Angular Universal)

这个解决方案就是 Angular Universal，NodeJS的一种 Angular 扩展，它在服务器上启动应用程序，并根据收入请求生成完整的 HTML 响应。现在，从用户请求到渲染和交互的Web应用程序的流程看起来如下：
1. 用户请求网页
2. 请求发送到服务端
3. NodeJS生成 HTML 并将其发送到浏览器
4. 浏览器从HTML呈现视图，并立即将其显示给用户，同时执行JavaScript。
5. 当JavaScript完成应用程序的引导时，它用 Angular 应用程序更改HTML渲染视图。
6. 用户看到完全可交互的 Angular 应用

好的，现在这个理论我们已经了解了，现在我们用一个简单的例子来练习一下吧。

@ng-toolkit/universal — 一行命令添加 Angular Universal 在任何 Angular 项目中

键入一个简单命令：

ng add @ng-toolkit/universal

boom! 你已经导入它了! 全部的导入步骤你已经做完了!
让我们来运行这个应用:

npm run build:prod
npm run server

并在单独的终端窗口检查一下效果：

$ curl localhost:8080
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<title>MyApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.34c57ab7888ec1573f9c.css"><style ng-transition="app-root"></style></head>
<body>
<app-root _nghost-c0="" ng-version="6.0.3"><div _ngcontent-c0="" style="text-align:center"><h1 _ngcontent-c0=""> Welcome to app! </h1><img _ngcontent-c0="" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==" width="300"></div><h2 _ngcontent-c0="">Here are some links to help you start: </h2><ul _ngcontent-c0=""><li _ngcontent-c0=""><h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://angular.io/tutorial" rel="noopener" target="_blank">Tour of Heroes</a></h2></li><li _ngcontent-c0=""><h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://github.com/angular/angular-cli/wiki" rel="noopener" target="_blank">CLI Documentation</a></h2></li><li _ngcontent-c0=""><h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://blog.angular.io/" rel="noopener" target="_blank">Angular blog</a></h2></li></ul></app-root>
<script type="text/javascript" src="runtime.a66f828dca56eeb90e02.js"></script><script type="text/javascript" src="polyfills.2f4a59095805af02bd79.js"></script><script type="text/javascript" src="main.178573f0f1b826344a91.js"></script>
<script id="app-root-state" type="application/json">{}</script></body></html>

这就是我们想要的不是吗？现在搜索引擎和爬虫可以看到你的应用程序有一些内容！这还不是全部。你可以向前走，用另一个伟大的工具@ng-toolkit:

ng add @ng-toolkit/serverless

而且，服务器端渲染的应用程序已经准备好部署在 AWS Lambda 上了。

Thanks for reading!

原文地址(可能需要科学上网)

liyouzhi666
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
详解Angular5 服务端渲染实战
08-28
本篇文章主要介绍了详解Angular5 服务端渲染实战，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Node.js-用于node.jsNest框架的AngularUniversal模块
08-10
用于node.js Nest 框架的 Angular Universal 模块
angular 服务器渲染_带有Angular Universal的Angular 2中的服务器端渲染
culiu9261的博客
07-20 424
angular 服务器渲染Server-side rendering is a headache and if you ever worked with Angular 1, you should be worried about how Angular 2 plans to handle it. Server-side rendering in Angular 2 is often-times ...
Angular开发实践之服务端渲染
08-27
主要介绍了Angular开发实践之服务端渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
angular-universal:一个带有Angular 6的简单Angular Universal入门
05-01
Angular Universal Full Starter Angular的服务器端渲染 目录 现场演示 （服务器端渲染） 特征 使用Angular 6作为通用Web应用程序平台 使用Angular Material 6作为UI组件 使用module-map-ngfactory-loader 6作为惰性路由的服务器端渲染 使用angular / cli 6作为代码支架 使用webpack 4作为模块捆绑器 使用节点作为服务器 使用express作为请求处理程序 使用ngx-translate支持国际化（ i18n ） 使用ngx-meta进行SEO（标题，元标记和Open Graph标记进行社交共享） 使用hmr （热模块替换）作为Webpack和Angular的热模块重载 使用udk （通用开发套件）作为Webpack扩展来改善通用应用程序的开发。 计划
Angular 服务器端渲染的学习笔记(二)
SAP 资深技术专家 Jerry Wang 的技术分享
05-21 722
官网地址：https://angular.io/guide/universal使用服务器端渲染，可以提前让服务器加载一些异步数据，比如从数据库里读取产品的描述信息，便于爬虫读取。网络爬虫一般不会通过执行 JavaScript 的方式去异步加载 HTML.因此通常情况下，我们需要服务器先执行一些 JavaScript 片段，才能将生成的页面返回给客户端。SSR 可以生成一个应用的静态版本，但并不意味着该版本完全可用。应用页面的静态版本，大多数 DOM 元素都已经提前加载。这种情况下，不需要等待 Angular
Angular 服务端渲染 Angular Universal 实例
老杨头的博客
11-22 1134
Angular Universal 通过后端渲染的方式能够很好的解决搜索引擎抓取不到完整渲染页面的问题。但是页面加载速度比较考验服务器的性能，服务器性能不好服务端渲染也就慢，浏览器拿到文档的时间就长。所以对于服务器条件不好的情况还是采用浏览器端渲染结合常用路由页面预先渲染的方式。可以减少页面加载时间。蜗牛双语阅读网站即是采用这种方式。
angular cli 常用命令，以及angular容易遗忘的属性与方法
qq_34486756的博客
12-01 639
ngcli 快速创建组件 模块
Angular 服务器端渲染中的坑
u011256637的专栏
05-28 3131
Angular 官方文档已经有 Angular Universal 那一章，专门用于讲解服务器端渲染。但是在使用服务器渲染的时候还是碰到不少的坑。1. 文档中的坑文档中已经大致介绍了服务器渲染的过程，以及需要的配置，但文档中还是有不少的问题。
Angular6 SSR(Angular6项目服务端渲染)
saintpeters的博客
08-29 5430
第一步 Angular 项目构建 ng new projectName –style=scss 第二步 Angular SSR配置 cd projectName npm install –save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader @nguniversal/expr...
mobile-toolkit, 使用 Angular 构建渐进式网络应用的工具.zip
09-17
mobile-toolkit, 使用 Angular 构建渐进式网络应用的工具 Angular 移动工具包这个 repo 是一系列工具和指南，帮助构建渐进式的网络应用。 所有指南目前都基于 Angular，所有工具都应该考虑为alpha质量。 将来，在 mobile.angular.io 平台上将添加更多的
详解从angular-cli：1.0.0-beta.28.3升级到@angular/cli：1.0.0
08-30
本篇文章主要介绍了详解从angular-cli：1.0.0-beta.28.3升级到@angular/cli：1.0.0，具有一定的参考价值，有兴趣的可以了解一下
Angular2关于@angular/cli默认端口号配置的问题
01-19
前言 最近研究Angular2的@Angular/cli，有改端口号的需求。 方法一 1、定位到：..\node_modules\._@angular[email protected]@@angular\cli\lib\config 2、打开schema.json 3、直接看图，修改即可。 方法二 cmd定位到项目目录，命令：ng serve –port 端口号 总结 有需求就会有方法，没有走不通的路。
angular-toolkit
06-13
角度工具包 Angular 工具包是用于身份验证、日志记录、数据服务、本地存储……的常用工具。
大学生创新创业训练计划经验分享.zip
04-25
大学生创新创业训练计划（以下简称为“大创计划”）是一项旨在提升大学生创新能力和创业精神的实践活动。通过这项计划，学生可以在导师的指导下，自主开展研究性学习和创业实践。下面我将分享一些关于大创计划的经验和建议。
node-v12.22.3-x86.msi
最新发布
04-25
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
毕业设计-The coding solutions of Leetcode and 剑指Offer using .zip
04-25
这里为你收集整理了关于毕业设计、课程设计可参考借鉴的资料一份，质量非常高，如果你投入时间去研究几天相信肯定对你有很大的帮助。到时候你会回来感谢我的。 本资源是经过本地编译测试、可打开、可运行的项目、文件或源码，可以用于毕业设计、课程设计的应用、参考和学习需求，请放心下载。 祝愿你在这个毕业设计项目中取得巨大进步，顺利毕业！ 但还需强调一下，这些项目源码仅供学习和研究之用。在使用这些资源时，请务必遵守学术诚信原则和相关法律法规，不得将其用于任何商业目的或侵犯他人权益的行为。对于任何因使用本资源而导致的问题，包括但不限于数据丢失、系统崩溃或安全漏洞，风险自担哦！
【微信小程序毕业设计】宠物店商城系统开发项目(源码+演示视频+说明).rar
04-25
【微信小程序毕业设计】宠物店商城系统开发项目(源码+演示视频+说明).rar 【项目技术】 微信小程序开发工具+java后端+mysql 【演示视频-编号：282】 https://pan.quark.cn/s/cb634e7c02b5 【实现功能】 本系统实现的是和宠物相关的信息管理和发布，加入了商品销售的功能。操作角色为管理员和用户、商家，管理员的功能为用户管理、商家管理、宠物分类管理、宠物信息管理、商品分类管理、宠物用品管理、项目类型管理、服务项目管理、宠物日志管理、订单管理等；用户的功能为购买宠物、商品、预约服务发表日志管理订单等。商家功能为提供宠物、宠物用品、宠物服务，管理订单和服务预约等。
雷迪森的工具包（95分以上课程大作业）.zip
04-25
Java SSM项目是一种使用Java语言和SSM框架（Spring + Spring MVC + MyBatis）开发的Web应用程序。SSM是一种常用的Java开发框架组合，它结合了Spring框架、Spring MVC框架和MyBatis框架的优点，能够快速构建可靠、高效的企业级应用。 1. Spring框架：Spring是一个轻量级的Java开发框架，提供了丰富的功能和模块，用于开发企业级应用。它包括IoC（Inverse of Control，控制反转）容器、AOP（Aspect-Oriented Programming，面向切面编程）等特性，可以简化开发过程、提高代码的可维护性和可测试性。 2. Spring MVC框架：Spring MVC是基于Spring框架的Web框架，用于开发Web应用程序。它采用MVC（Model-View-Controller，模型-视图-控制器）的架构模式，将应用程序分为模型层、视图层和控制器层，提供了处理请求、渲染视图和管理流程的功能。 3. MyBatis框架：MyBatis是一个持久层框架，用于与数据库进行交互。它提供了一种将数据库操作与Java对象映射起来的方式，避免了手动编写繁琐的SQL语句，并提供了事务管理和缓存等功能，简化了数据库访问的过程
npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @fortawesome/angular[email protected] npm ERR! Found: @angular/[email protected] npm ERR! node_modules/@angular/common npm ERR! @angular/common@"~9.1.13" from the root project npm ERR! peer @angular/common@"9.1.13" from @angular/[email protected] npm ERR! node_modules/@angular/forms npm ERR! @angular/forms@"~9.1.13" from the root project npm ERR! peer @angular/forms@">=9.0.0 <10.0.0" from @ng-select/[email protected] npm ERR! node_modules/@ng-select/ng-select npm ERR! @ng-select/ng-select@"^4.0.4" from the root project npm ERR! 6 more (@angular/platform-browser, ...)
06-06
这个错误通常是由于npm无法解析依赖关系导致的。你可以尝试以下几个方法来解决这个问题： ...如果以上方法都不能解决问题，建议检查你的项目配置文件中的依赖版本是否正确，或者尝试使用其他版本的依赖包。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值