5 lines
24 KiB
JSON
5 lines
24 KiB
JSON
|
{
|
||
|
|
"id": "guide/universal",
|
||
|
|
"title": "Server-side rendering (SSR) with Angular Universal",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/universal.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"server-side-rendering-ssr-with-angular-universal\">Server-side rendering (SSR) with Angular Universal<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/universal#server-side-rendering-ssr-with-angular-universal\"><i class=\"material-icons\">link</i></a></h1>\n<p>This guide describes <strong>Angular Universal</strong>, a technology that renders Angular applications on the server.</p>\n<p>A normal Angular application executes in the <em>browser</em>, rendering pages in the DOM in response to user actions.\nAngular Universal executes on the <em>server</em>, generating <em>static</em> application pages that later get bootstrapped on\nthe client. This means that the application generally renders more quickly, giving users a chance to view the application\nlayout before it becomes fully interactive.</p>\n<p>For a more detailed look at different techniques and concepts surrounding SSR, please check out this\n<a href=\"https://developers.google.com/web/updates/2019/02/rendering-on-the-web\">article</a>.</p>\n<p>You can easily prepare an app for server-side rendering using the <a href=\"guide/glossary#cli\">Angular CLI</a>.\nThe CLI schematic <code>@nguniversal/express-engine</code> performs the required steps, as described below.</p>\n<div class=\"alert is-helpful\">\n<p> <strong>Note:</strong> <live-example downloadonly=\"\">Download the finished sample code</live-example>,\nwhich runs in a <a href=\"https://expressjs.com/\">Node.js® Express</a> server.</p>\n</div>\n<a id=\"the-example\"></a>\n<h2 id=\"universal-tutorial\">Universal tutorial<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/universal#universal-tutorial\"><i class=\"material-icons\">link</i></a></h2>\n<p>The <a href=\"tutorial\">Tour of Heroes tutorial</a> is the foundation for this walkthrough.</p>\n<p>In this example, the Angular CLI compiles and bundles the Universal version of the app with the\n<a href=\"guide/aot-compiler\">Ahead-of-Time (AOT) compiler</a>.\nA Node.js Express web server compiles HTML pages with Universal based on client requests.</p>\n<p>To create the server-side app module, <code>app.server.module.ts</code>, run the following CLI command.</p>\n<code-example language=\"bash\">\n\nng add @nguniversal/express-engine\n\n</code-example>\n<p>The command creates the following folder structure.</p>\n<code-example language=\"none\">\nsrc/\n index.html <i>app web page</i>\n main.ts <i>bootstrapper for client app</i>\n main.server.ts <i>* bootstrapper for server app</i>\n style.css <i>styles for the app</i>\n app/ ... <i>application code</i>\n app.server.module.ts <i>* server-side application module</i>\nserver.ts <i>* express web server</i>\ntsconfig.json <i>TypeScript base configuration</i>\ntsconfig.app.json <i>TypeScript browser application configuration</i>\ntsconfig.server.json <i>TypeScript server application configuration</i>\ntsconfig.spec.json <i>TypeScript tests configuration</i>\n</code-example>\n<p>The files marked with <code>*</code> are new and not in the original tutorial sample.</p>\n<h3 id=\"universal-in-action\">Universal in action<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/universal#universal-in-action\"><i class=\"material-icons\">link</i></a></h3>\n<p>To start rendering your app with Universal on your local system, use the following command.</p>\n<code-example language=\"bash\">\nnpm run dev:ssr\n</code-example>\n<p>Open a browser and navigate to <a href=\"http://localhost:4200/\">http:
|
||
|
|
}
|