Angular4 +サーバレンダリング(サーバレンダリング)開発チュートリアルに基づく詳細な説明

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

目標:

1.より良いSEO、簡単にクローラのクロールページのコンテンツを検索する

2.コンテンツのより早い時間

影響:

1.ユーザー:レンダリングされたページを元のページよりも高速に表示し、ユーザーエクスペリエンスを向上させる

2.開発者:一部のコードでは、サーバーレンダリングアプリケーション(ウィンドウ、ドキュメント、ナビゲータなど)で実行するために特別な処理が必要な場合があります。

インストール:

1.ノードは6+

2.angular recommendation 4.1+

理論的実現:

これはvueの公式Webサイトサーバーからの模式的なレンダリングですが、原則的には角度と同じですが、コードが矛盾しています。

SSRには、アプリケーションコード(appmodule)を含む2つのエントリファイルapp-client.jsとapp-server.jsがあります。webpackは、サーバ用のサーババンドルとクライアント用の2つのエントリファイルでパッケージ化されています。クライアントバンドル。

サーバーバンドルはノード上で実行されるので、コード内にウィンドウ、ドキュメント、およびその他のブラウザオブジェクトがあるとエラーが報告される場合は、解決するためにjsdomを導入できますが、面倒です。


import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
constructor(@Inject(PLATFORM_ID) private platformId: Object) { ... }
ngOnInit() {
if (isPlatformBrowser(this.platformId)) {
// Client only code.
...
}
if (isPlatformServer(this.platformId)) {
// Server only code.
...
}
} 

この問題は、現在のプラットフォームがPLATFORM_IDトークンによって挿入されたオブジェクトによってブラウザかサーバーかをチェックすることで解決されます。

クライアントバンドルはブラウザで実行されるため、ここではブラウザオブジェクトの使用に問題はありませんが、ノードfsなどのオブジェクトが含まれている場合はエラーが報告されます。解決策は上記と同じです。

サーバーバンドルは、HTMLファイルの文字列のようなもので、ノードによってレンダリングされた後にフロントエンドに送信されます。このHTML文字列は、ノードとブラウザの両方で実行できます。

クライアントバンドルはjsファイルのようなもので、フロントエンドのすべてのイベントが含まれています。ウィンドウオブジェクトはここで使用できます。 さらに、ドキュメントオブジェクトは使用できますが、フロントエンドのパフォーマンスの考慮事項に基づいてはお勧めできません。

角度のあるプロジェクトの使用では、開発環境はJITを使用し、プロダクション環境はAOTを使用しますが、これは紛争ではありません。 (AOTとJITの違いはhttps://angular.cn/docs/ts/latest/cookbook/aot-compiler.htmlにあります )

あなたは私のプロジェクト開発環境がブラウザレンダリング+ JITであると推測しました。プロダクション環境はサーバーレンダリング+ AOTです。

したがって、主な手順は次のように要約されます。

1。 コンパイルされたファイルディレクトリ内のすべてのファイルをクリアします。

2。 ngcを実行してクライアントコードとサーバーコードを別々にプリコンパイルしてから、webpackでパッケージ化して圧縮する

3。 ノードは、コンパイルされたサーバーバンドルコードを実行します。

特定のコード実装:

1、エクスプレスフレームワーク(koaも可能)を使用して、nodejsサーバーの確立、リスニングポート


const express = require('express');
const desktop = express();
const port = process.env.NODE_PORT ? process.env.NODE_PORT : 4200;
desktop.listen(port + 1, () => {
console.log(`Desktop Listening on: http://localhost:${port}`);
});

2、ページをレンダリングし、リクエストを処理する


import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import { AppServerModuleNgFactory } from './app-server.module.ngfactory';
const ROOT = path.join(path.resolve(__dirname),'..','build');
function response(req, res) {
res.render(`index.html`, {
req,
res
});
}
app.engine('html', ngExpressEngine({
bootstrap: AppServerModuleNgFactory
}));
app.set('view engine', 'html');
app.set('views', ROOT);
app.get('/', response);
routes.forEach((r) => {
app.get(r, response);
app.get(`${r}/*`, response);
}
);

角度のあるサーバー側のレンダリングでは、ある程度ユーザーエクスペリエンスを最適化できますが、小さな問題はまだあります。ユーザーが最初にロードするときには、Webサイト全体のコンテンツをまだロードする必要があります。

だから私は現在、遅延ロード(レイジーロード、オンデマンドロードとも呼ばれる)をangular4 ssrに基づいて追加することを検討しています。遅延ロードモジュールは起動時間を短縮するのに役立ちます。 遅延ロードでは、アプリケーションをすべて一度に読み込む必要はなく、最初にアプリケーションを読み込むときにユーザーが見るものを読み込むだけです。

遅延ロードモジュールは、ユーザーがルートに移動したときにのみロードされます。 ユーザーエクスペリエンスをさらに最適化するには、完了後にエッセイレコードを作成します。


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ