关于sap:Angular-服务器端渲染的学习笔记一

47次阅读

共计 3634 个字符，预计需要花费 10 分钟才能阅读完成。

官网链接：https://angular.io/guide/univ…

Angular Universal, a technology that renders Angular applications on the server.

Angular Universal 是一种将 Angular 利用渲染于服务器平台上的技术。

A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions.

一般的 Angular 利用在浏览器里执行，响应用户动作，并以 DOM 的形式渲染页面。

Angular Universal executes on the server, generating static application pages that later get bootstrapped on the client.

Angular Universal 执行在服务器端，生成动态的利用页面，该页面随后在客户端进行疏导 (bootstrap).

This means that the application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.

服务器端渲染通常意味着应用程序的渲染速度更加快捷，容许用户在利用可能实现失常互动之前，就有机会一窥利用的布局。

google 有一篇专门讲 SSR 技术的文章：https://developers.google.com…

You can easily prepare an app for server-side rendering using the Angular CLI. The CLI schematic @nguniversal/express-engine performs the required steps.

应用 Angular CLI，能够实现一个利用反对 SSR 所需的筹备工作，具体步骤通过 CLI Schematic 的 @nguniversal/express-engine 实现。

To create the server-side app module, app.server.module.ts, run the following CLI command.

为了创立面向服务器端渲染的 app module, 即 app.server.module.ts，执行下列 CLI 指令：

ng add @nguniversal/express-engine

该指令会创立下列的文件构造：

To start rendering your app with Universal on your local system, use the following command.

本地应用 Universal 形式渲染利用的命令：npm run dev:ssr

执行的是 package.json scripts 区块里定义的该命令：

如果遇到谬误音讯：An unhandled exception occurred: Cannot find module ‘@nguniversal/builders/package.json’
Require stack:

先 npm install. 之后原始的谬误隐没。

A Node.js Express web server compiles HTML pages with Universal based on client requests.

一个 node.js express web 服务器，基于 Universal 编译 HTML 页面。

进行了很多编译动作：

整个 dist 文件夹和其子文件夹都是 npm run dev:ssr 后主动生成的：

关上 http://localhost:4200/dashboa… hero dashboard:

Navigation via routerLinks works correctly because they use the native anchor () tags.

基于 routerLinks 的跳转能够失常工作，因为其应用原生的 a 标签。

Facilitate web crawlers through search engine optimization (SEO)

为了配合网络爬虫，实现搜索引擎优化。

Improve performance on mobile and low-powered devices

改善利用在挪动端和低配设施上拜访的性能。

Show the first page quickly with a first-contentful paint (FCP)

可能以 FCP 的形式，疾速显示利用首页。

Google, Bing, Facebook, Twitter, and other social media sites rely on web crawlers to index your application content and make that content searchable on the web.

谷歌，Bing，Facebook 和其余社交媒体网站，都应用网络爬虫，为利用内容建设索引，以便让其内容可能在网络上被搜寻到。

These web crawlers may be unable to navigate and index your highly interactive Angular application as a human user could do.

如果一个 Angular 利用具备高度的可交互性，那么网络爬虫可能很难像一个人类用户一样，采纳导航的形式拜访利用，并索引其内容。

Angular Universal can generate a static version of your app that is easily searchable, linkable, and navigable without JavaScript.

Angular Universal 能够基于 Angular 利用，生成一个动态版本，易于被搜寻，链接，以及不借助 JavaScript 进行导航。

Angular Universal Universal also makes a site preview available since each URL returns a fully rendered page.

同时也能让 site 预览成为可能，因为每个 url 返回的是齐全渲染过后的页面。

Some devices don’t support JavaScript or execute JavaScript so poorly that the user experience is unacceptable.

有些设施不反对 JavaScript，或者反对水平很差，因而利用用户体验很难承受。

For these cases, you may require a server-rendered, no-JavaScript version of the app.

在这种状况下，咱们须要一个服务器端渲染，不须要 JavaScript 也能运行的利用。

This version, however limited, may be the only practical alternative for people who otherwise couldn’t use the app at all.

这种版本的利用，尽管性能局限，然而总比齐全不能用的版本好。

Displaying the first page quickly can be critical for user engagement.

为了确保用户体验，迅速显示利用首屏页面的能力至关重要。

Your app may have to launch faster to engage these users before they decide to do something else.
With Angular Universal, you can generate landing pages for the app that look like the complete app. The pages are pure HTML, and can display even if JavaScript is disabled.

应用 Angular Universal，能够生成利用的初始页面，该页面和残缺的利用相比外观上无区别，并且是纯正的 HTML 代码，即便在 JavaScript 禁掉的浏览器上，也能失常显示。