How to get data from the database correctly in SPA?

Question

JavaScript

Good afternoon!
Let's say there is a simple blog on Vue, SPA.
The data is stored in the MongoDB database. Server on NodeJS.
Vue allows you to display data without reloading the page.
How to make it so that when changing and adding data in the database, they are displayed in SPA without reloading?

Answer 1

The best solution is to keep the websocket connection between front and back constantly open. When adding data to the database, send a notification about the added data from the back to all websockets.
Crutch variant - on the timer from the front to interrogate the back about the presence of new data.

Answer 2

I think the question is more complicated than it seems. It is not so important through which mechanism you will receive updates, web socket, longpooling or simple polling. I would start with a simple survey, then I would redo it.
The user may be behind a proxy, and proxies do not hold a websocket. The Internet may "blink", the browser may unload the tab, the computer has fallen asleep. A lot of things can happen, and you shouldn't rely on the persistence of the client-server connection.
It is important that the client must know its current state and receive a list of state changes. Usually the state has a number, when changing the number increases. Knowing the number of the previous state, you can get a list of changes to the last state. This is the general concept. Perhaps you may have more conflicts of edits, already estimate how difficult the dif will be. It may be that the list of changes is too large and it is easier to reload the entire state than to accept a dif.