官网地址：https://angular.io/guide/univ…

I have mainly used angular universal for SEO purposes. In that, the server will render enough information on the page so that when Google crawls the page, you can have the server load some asynchronous data (eg. a description of a product from a databse) before serving the page so the crawler sees the information.

应用服务器端渲染，能够提前让服务器加载一些异步数据，比方从数据库里读取产品的形容信息，便于爬虫读取。

Asynchronously loaded html via javascript is often missed by crawlers.

网络爬虫个别不会通过执行 JavaScript 的形式去异步加载 HTML.

so you need the server to run a bit of javascript before serving the page to the client sometimes.

因而通常状况下，咱们须要服务器先执行一些 JavaScript 片段，能力将生成的页面返回给客户端。

SSR can generate a static version of a page and serve it. That doesn’t mean it will be fully functional.

SSR 能够生成一个利用的动态版本，但并不意味着该版本齐全可用。

Serve, as needed, a static version of the page with most of the DOM elements preloaded, instead of waiting for angular to bootstrap and do this asynchronously via Javascript.

利用页面的动态版本，大多数 DOM 元素都曾经提前加载。这种状况下，不须要期待 Angular 实现 bootstrap 后，再执行 JavaScript 实现页面异步加载的成果。

To support offline mode, it has to be combined with pwa techniques, such as caching from the serviceWorker, getting data from local/session storage/ indexedDB, etc.

为了反对离线模式，SSR 须要和 PWA 技术配合起来应用，比方基于 Service Worker 的缓存，从 local / session 存储介质里读取数据，等等。

Universal web servers

A Universal web server responds to application page requests with static HTML rendered by the Universal template engine.

Universal web 服务器，应用 Universal 模板引擎，给应用程序的页面申请，回复一个动态版本的渲染结束的 HTML 页面。

The server receives and responds to HTTP requests from clients (usually browsers), and serves static assets such as scripts, CSS, and images.

服务器接管到从客户端 (通常状况下都是浏览器) 发动的 HTTP 申请，并且以动态资源，比方 scripts，CSS 和图片的形式来响应。

It may respond to data requests, either directly or as a proxy to a separate data server.

它也能响应数据申请，或者间接响应，或者作为代理，将该数据申请转发给另外的数据服务器。

The sample web server for this guide is based on the popular Express framework.

Any web server technology can serve a Universal app as long as it can call Universal’s renderModule() function. The principles and decision points discussed here apply to any web server technology.

任何 web 服务器都可能架设 Universal 利用，只有其可能调用 Universal 的 renderModule() 办法。

Universal applications use the Angular platform-server package (as opposed to platform-browser)

Universal 利用应用 Angular platform-server 包

which provides server implementations of the DOM, XMLHttpRequest, and other low-level features that don’t rely on a browser.

这个包提供了服务器端的 DOM 实现，XMLHttpRequest，以及其余不依赖于浏览器的底层个性。

The server (Node.js Express in this guide’s example) passes client requests for application pages to the NgUniversal ngExpressEngine.

服务器(在这个学习笔记里，服务器由 nodejs Express 实现) 将客户端对于利用页面的申请，转发给 NgUniversal Express engine.

Under the hood, this calls Universal’s renderModule() function, while providing caching and other helpful utilities.

其底层实现原理是，调用 Universal renderModule 函数，提供缓存和其余性能。

The renderModule() function takes as inputs a template HTML page (usually index.html), an Angular module containing components, and a route that determines which components to display. The route comes from the client’s request to the server.

renderModule 的输出：

• HTML 模板页面，通常为 index.html
• 一个蕴含 Components 的 Angular module
• 一个 route，决定哪些 Component 应该显示

Each request results in the appropriate view for the requested route. The renderModule() function renders the view within the <app> tag of the template, creating a finished HTML page for the client.

每个申请最终会导致其对应的路由视图被渲染在模板的 app 标签里。

Because a Universal app doesn’t execute in the browser, some of the browser APIs and capabilities may be missing on the server.

Universal 利用并不会执行在浏览器环境里，因而局部浏览器 API 和性能，很可能在服务器端不可用。

For example, server-side applications can’t reference browser-only global objects such as window, document, navigator, or location.

例如，服务器端利用无奈应用只有在浏览器端可用的 window，document，navigator，location 等全局对象。

Angular provides some injectable abstractions over these objects, such as Location or DOCUMENT; it may substitute adequately for these APIs.

针对这些对象，Angular 提供了可注入的形象，比方 Location 或者 DOCUMENT.

If Angular doesn’t provide it, it’s possible to write new abstractions that delegate to the browser APIs while in the browser and to an alternative implementation while on the server (aka shimming).

当然咱们也能自行在应用程序里编写这些形象逻辑，即所谓的 shimming.

Similarly, without mouse or keyboard events, a server-side app can’t rely on a user clicking a button to show a component.

相应的，因为短少鼠标或者键盘事件，服务器端利用无奈基于用户点击按钮的形式来触发 Component 的显示。

The app must determine what to render based solely on the incoming client request. This is a good argument for making the app routable.

利用必须可能纯正基于客户端发动的申请来判断出什么内容须要渲染。这是让利用反对路由的一个极佳的理由。

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
server.engine('html', ngExpressEngine({bootstrap: AppServerModule,}));

The ngExpressEngine() function is a wrapper around Universal’s renderModule() function which turns a client’s requests into server-rendered HTML pages.

ngExpressEngine 函数是 Universal renderModule 函数的一个 wrapper, 将客户端申请转换成服务器端渲染好的 HTML 页面。

接管的输出参数：

bootstrap: The root NgModule or NgModule factory to use for bootstraping the app when rendering on the server.

根 NgModule 或者 NgModule 工厂，用于 bootstrap 在服务器端渲染的利用。

For the example app, it is AppServerModule.

It’s the bridge between the Universal server-side renderer and the Angular application.

AppServerModule 是 Universal 服务器端渲染器和 Angular 利用之间的桥梁。

SSR 须要对下列三种不同类型的申请别离进行解决：

• Data request: request URL that begins /api. 数据申请，url 里常蕴含诸如 api 类型的片段。
• App navigation: request URL with no file extension. 路由申请，不蕴含文件扩展名。
• Static asset: all other requests. 动态资源申请。

A Node.js Express server is a pipeline of middleware that filters and processes requests one after the other.

nodejs Express 服务器理论是一种中间件流传路径，以一个接一个的形式，过滤和解决申请。

下列的代码，将所有不蕴含 file extension 的申请，都当作是导航申请进行解决：

server.get('*', (req, res) => {res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl}] });
});

To ensure that clients can only download the files that they are permitted to see, put all client-facing asset files in the /dist folder and only honor requests for files from the /dist folder.

一个最佳实际是，为了确保客户端只能下载其权限容许范畴内的文件，将所有该类型的文件都放到 /dist 文件夹里。

// Serve static files from /browser
server.get('*.*', express.static(distFolder, {maxAge: '1y'}));

In a server-side rendered app, HTTP URLs must be absolute (for example, https://my-server.com/api/her…

服务器端渲染，HTTP URL 必须是绝对路径。

This means that the URLs must be somehow converted to absolute when running on the server and be left relative when running in the browser.

这意味着，当运行在服务器端时，url 必须被转换成绝对路径，而运行在浏览器端时，能够依然保留成相对路径。

If you are using one of the @nguniversal/*-engine packages (such as @nguniversal/express-engine), this is taken care for you automatically. You don’t need to do anything to make relative URLs work on the server.

@nguniversal/express-engine 会帮忙咱们主动实现绝对路径转相对路径的操作。

更多 Jerry 的原创文章，尽在：” 汪子熙 ”: