本文将指导您了解如何使用Angular Universal进行服务器端渲染(SSR)来提高性能以及其他因素。 角度通用是一种在服务器上呈现应用程序的技术。
在正常情况下,应用程序在浏览器中执行并以DOM呈现页面。在Angular中,通用静态页面从服务器获取,然后被引导到客户端。这意味着初始页面将很快呈现,并将提高应用程序的性能。
为什么要进行服务器端渲染?
主要有3个原因,
1)更好的Web爬虫搜索引擎优化可见性
2)提高移动设备和其他平台上的性能
3)首个内容丰富的涂料(FCP)–快速显示首页
Web爬网程序(搜索引擎优化)
诸如Facebook,Google,Bing,twitter等社交媒体网站都依靠网络爬虫来索引您的应用程序内容,并且这些内容将在搜索中可见。
Angular Univeral帮助我们创建应用程序的静态版本,并且可以轻松地进行搜索。应用程序的每个URL返回渲染的页面。
提高移动设备和其他平台上的性能
有些设备不支持javascript,有些设备无法正常运行,这不利于用户体验。在这种情况下,您可能需要在服务器端进行渲染以解决所有这些问题,这将有助于提高性能。
首个内容丰富的涂料(FCP)–快速显示首页
对于登陆到该页面的用户来说,迅速显示第一页非常重要。加载速度更快的页面效果更好,它应在100ms左右的时间内加载首页,从而吸引用户停留在现场的时间更长。
使用Angular Universal,您可以为应用程序生成看上去像整个应用程序的登录页面。实际上,您将提供目标网页的静态版本以引起用户的注意。同时,您将在其后加载整个Angular应用。
安装
让我们开始在您的应用程序中安装Angular Universal,
要创建服务器端应用程序模块app.server.module.ts,请运行以下CLI命令。
ng add @nguniversal/express-engine
一旦您运行完上述命令,这将生成几个新文件以及现有文件中的更改。如下所示,
src/
index.html app web page
main.ts bootstrapper for client app
main.server.ts * bootstrapper for server app
style.css styles for the app
app/ ... application code
app.server.module.ts * server-side application module
server.ts * express web server
tsconfig.json TypeScript base configuration
tsconfig.app.json TypeScript browser application configuration
tsconfig.server.json TypeScript server application configuration
tsconfig.spec.json TypeScript tests configuration
在上面带有*标记的结构文件中,是新生成的用于服务器端渲染的文件。
角度通用在行动
要在本地系统上开始使用Universal渲染应用,请使用以下命令。
npm run dev:ssr
现在,您的应用程序将在带有通用角度的本地环境中运行。
过渡到该应用程序后,您会看到它运行非常迅速,但您也应该在现实情况下对该应用程序进行测试,以获得更好的说明。
我们还可以在网络速度较慢的本地上使用应用程序,以验证不同的情况。您可以完全按照如下所示进行测试。
- 打开Chrome开发者工具,然后转到“网络”标签。
- 在菜单栏的最右侧找到“网络限制”下拉列表。
- 尝试“ 3G”速度之一。
服务器端渲染应用程序仍然可以快速启动,但是完整的客户端应用程序可能需要几秒钟才能加载。
要获得有关Web服务器的代码和每个功能的更多见解,通用模板引擎,服务静态文件,您可以在下面指定的服务器端呈现(SSR)的重要链接中找到它们。
重要连结
Angular通用官方链接– //angular.io/guide/universal