Dealing with a massive array of 30,000 items can be quite daunting, especially when it comes in as a stream using grpc-web. Currently, I'm fetching the data from grpc.client() and populating an array before displaying it using *ngFor. However, I've noticed that this approach is causing some lag and slowness. Is there a more efficient way to showcase this data? I was considering utilizing an Observable array and the async pipe for better performance, but I'm unsure about how to implement it and whether it will actually make a difference.
Below is a snippet of the code:
book.component.ts
queryBooks() {
const client = grpc.client(BookService.QueryBooks, {
host: host,
});
client.onHeaders((headers: grpc.Metadata) => {
// console.log("queryBooks.onHeaders", headers);
});
client.onMessage((message: Book) => {
this.books.push(message.toObject())
});
client.onEnd((code: grpc.Code, msg: string, trailers: grpc.Metadata) => {
trailers :', trailers);
});
client.start();
client.send(queryBooksRequest);
}
While I'm uncertain whether switching to observables will eliminate the sluggishness, the current setup is proving to be very slow.