Client side async. requests with server side rendering

I thought I'd experiment a little with SEO using Angular4 / Node.js, but have come accross a challenge.

Angular Universal makes it possible for me to do server side rendering so I can have my meta keywords, title, image urls etc. injected into the HTML before my page hits the browser--great! The challenge is now that at some point, I'd like to be able to at least do some stuff asynchronously on the client side, eg. GET-ting some JSON data, or even catching an Angular click-event.

I do not seem to be able to do that kind of stuff, while using the example below.

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
    });
  }
}

Is there no way something like this would be possible when server side rendering using Universal? How would you guys go around implementing this?

Cheers!

---

I am not really sure what is your intent but I think it could be one of these:

you want to do some stuff when user clicks on server-side-rendered button before Angular takes over? Then you are looking for Preboot.

you want to fetch data from server during server-side-rendering and then use these data in client? Then you are maybe looking for TransferState rehydratation API.

there is something wrong with your application and it doesnt react for button clicks at all. Clicks should work out of box even with SSR. Check your console for errors.

链接地址: http://www.djcxy.com/p/31368.html

上一篇: 带有服务器端渲染的渐进式角应用程序不构建索引

下一篇: 客户端异步。 请求与服务器端渲染