How facebook, twitter reload their page without any refresh?

Question

I am so much curious about this technology, I want to know how Facebook, Twitter, and many websites reload their page after clicking on a link without any refreshing?

I search about this on google but did not find any helpful information, In this Quora article . Someone says that they use WebSocket API or AJAX to request anything like that.

So, What this technique/ technology name?

Answer 1

Mostly all modern websites are powered with FE frameworks like React, Angular, Vue and many others the main feature of which is dynamically construct DOM in response to user actions without the need of page reload.

One of the the power tool of these specific frameworks are routers. That pretty much reconstruct the page from the blueprint stored on FE side

Please have a look on the working demo of React Router: https://codesandbox.io/s/nn8x24vm60

PS: Pretty much JS hides/removes specific elements in the DOM and replaces them with the expected ones when user navigates using specific router links (which can look like normal link for other developer inspects DOM, unless you really inspect attached Event Listeners)