Multiple Observable subscription hits HTTP DB

Question

In analogous to this thread, i am also implementing in similar fashion. My idea here is to have a centralized DB json data cached, so that many components can refer to it.

However, In my case, i have a http data service; which actually picks JSON data from local json-server DB as shown below:

export class ProductDataService implements OnInit {

  constructor(private httpClientService: HttpClient) {
    this.productDataURL = environment.production ? "http://Server" : "http://localhost:3000/products";
    this.productList = this.httpClientService.get<IProduct[]>(this.productDataURL);
  }
}

This data service is being used in many components as well as for async pipes in view. Below are few among many consumers:

Component 1:

    export class DetailsProductsComponent implements OnInit {
         constructor(private activatedRoute: ActivatedRoute, private productService: ProductDataService) {     
            this.productService.productList.subscribe(item => 
              {
                this.selectedProduct = item.find(value => value.productCode == this.productId);
              });    
          }
}

Component 2:

export class ProductListComponent implements OnInit {

  _filterString: string = "";

  constructor(private productDataService: ProductDataService) {
    this._filterString = "";    
    this.productDataService.productList.subscribe(item => this.filteredProducts = this.masterProductList = item);
  }
}

As you can see above, i have just listed 2 components which are using the data service for its own tasks. There are several more components as such.

Kindly please guide me for below:

1. Is this the right way to do the data access? if not, please guide?
2. I noticed that, upon navigation to any of the components through UI clicks, a call is done to the subscribe or async pipes; which hits a call to Json-server DB. I can see the log in terminal window by json-server. So is it not poor performance? How to make it efficient?
3. Also this way, i am also trying to do an automatic update of the observable when the DB is updated. But it is not working. What i should do?

Thanks

Libraries used: "rxjs": "~6.2.0", "@angular/animations": "^6.1.10", "@angular/common": "^6.1.10", "@angular/compiler": "^6.1.10", "@angular/core": "^6.1.10", "@angular/forms": "^6.1.10", "@angular/http": "^6.1.10", "@angular/platform-browser": "^6.1.10", "@angular/platform-browser-dynamic": "^6.1.10", "@angular/router": "^6.1.10"