Angular 使用 @toolkit/universal 實現服務端渲染
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 你看到問題了嗎？我們在 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/universalboom! 你已經匯入它了! 全部的匯入步驟你已經做完了!
讓我們來執行這個應用:
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!
原文地址(可能需要科學上網)