クライアント側非同期。サーバー側のレンダリングでのリクエスト

Question

Angular4/Node.jsを使用してSEOを少し試してみたが、挑戦してきた。

アンギュラユニバーサルでは、サーバ側のレンダリングを行うことができるので、ページにブラウザが表示される前にHTMLにメタキーワード、タイトル、画像URLなどを挿入できます。問題は、ある時点で、少なくともクライアント側でのものを非同期的に処理できるようにしたいということです。いくつかのJSONデータを取得したり、Angularクリックイベントをキャッチしたりすることもできます。

以下の例を使用している間、私はそのようなことをすることはできないようです。

home.component.ts

import { Component, OnInit } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 

@Component({ 
    selector: 'home', 
    template: `<button (click)="fetch();">Fetch some json</button>`, 
    styleUrls: ['./home.component.scss'] 
}) 
export class HomeComponent implements OnInit { 

    constructor(
    private _http: Http 
) {} 

    ngOnInit() {} 

    public fetch(){ 
    console.log("Clicked");    // Does not happen 

    this._http.get('./i18n/da.json') 
    .subscribe((r: Response) => { 
     console.debug(r.json());   // Also not happening 
    }); 
    } 
} 

サーバ側は、ユニバーサルを使用してレンダリングするときに、このようなものが可能である方法はありませんか？あなたはどうやってこれを実装しますか？

乾杯！

Answer 1

私はあなたの意図が何であるか本当にわからないが、私はそれがこれらのいずれかであると思う：

1. あなたは角度が引き継ぐ前に、ユーザーがサーバー側レンダリングボタンをクリックしたときにいくつかのものをやってみたいですか？次に、あなたはPrebootを探しています。

2. サーバーサイドレンダリング中にサーバーからデータを取得し、クライアントでこれらのデータを使用したいですか？次に、あなたはTransferState再水和APIを探しています。

3. アプリケーションに問題があり、ボタンのクリックに対して反応しません。 SSRを使用していても、クリックはすぐに機能します。コンソールのエラーを確認してください。