Best option for continuously refreshing an HTML table (SPA)

Question

We're looking for a simple way to continuously update an HTML table (SPA) to display "orders" received. Currently, we are having to refresh the page every time we want to see the new orders. With my limited front-end knowledge, I can think of 3 ways to do it. I would appreciate advice on the best approach:

1- Making AJAX requests on a regular basis (every 10 seconds?) and then having a JS framework (Vue or React) update the table.

2- Using WebSocket (instead of HTTP) to enable server to push data when such new orders come in.

3- Using a notification service: back-end sends a notification to a topic that client browser is subscribed to. That triggers some code in front-end framework to request new orders from server. Is that feasible?

Again, I have very limited knowledge on how front-end frameworks (VueJS, React) can or can't do. I don't want this to become a full blown project. We're just looking for a simple solution to a (hopefully!) very common use case. Thank you.

Answer 1

It all depends from how many web client instances you expect to be running at any given time.

Polling for data changes even when there are no changes, and doing it from many web clients at the same time could result to a DoS attack to you own infrastructure.

WebSockets or even Server-sent-events should be a more reliable solution.

Implementing the client side is trivial, but doing the actual change detection on the back-end side involves some kind of versioning on your data. Hashing on the database row level should do the trick. There are more sophisticated solutions too.

Can you elaborate further on your use case?