There are three aspects to your question. Let's first dive into the technology needed to implement everything, and then briefly discuss how Twitter leverages that technology.
TL;DR? Twitter uses the history API combined with AJAX and DOM manipulation to work its magic.
The techniques, and a little bit of background
(a) Changing the URL without refreshing the page (2 and 4 on your list)
There is an API for that, implemented by modern browsers.
window.history.pushState(state, title, URL);
window.history.replaceState(state, title, URL);
window.addEventListener('popstate', (event) => { /* use event.state */ });
The first two functions allow you to simulate the user navigating to URL. The first adds an entry to the navigation history, while the second replaces the current entry. This impacts what will happen when users use the back and forward buttons in their browser.
When users navigate back, or you simulate this using history.back(), the popstate event is fired and the state that you passed into pushState can be accessed via event.sate. The state can be any object, so this is useful to store, say, the title of the page (to update the document.title), the scroll position, or whatever else you want.
(b) Loading content directly
Because the entry is saved in the browsing history, it is possible that users visit this URL directly after having closed the tab or even their browser. They may also share the URL and have others visit it directly. In those cases, there will be no popstate event, but simply a request to your web server for the URL you passed to pushState. The URL must hence be meaningful to the server.
Twitter apparently loads the poster profile as a backdrop in this case. It depends on your use case what you want the page to look like. Anything goes!
(c) Loading content asynchronously (3 on your list)
Back to (a) for a bit. Twitter not only changes the URL, but also loads the tweet, meta data of that tweet and replies to it. This is then displayed in a modal popup.
Again, there is an API1 to load content asynchronously: AJAX. In particular, the XMLHttpRequest object and its functions are of interest. This can be used to make requests to the server and fetch content without needing the page to reload completely.
It is worth mentioning that a new API is being developed: the Fetch API. At the time of writing, there is basic support in all modern major browsers, but it is still somewhat under development.
After having fetched the content, it can be displayed on the page in any which way you like. JavaScript can be used to create, delete and modify elements in the DOM at will.
An example from your question: Twitter
Now that all techniques are on the table, let's summarize what Twitter does.
When a user clicks a tweet in their feed.
- Load tweet meta data and replies (as described under (c)).
- Create a backdrop and modal and populate them with the loaded content.
This uses standard techniques: create, delete and modify page elements.
- Update the URL (as described under (a)) to enable easy sharing, amongst others.
When a user dismisses the modal.
- Delete the modal and backdrop.
- Update the URL (as described under (a)).
When a user directly visits the URL to a specific tweet.
- Let the server respond with the profile page of the tweet author, with the tweet details loaded in a modal on top of it. Thus, no JavaScript is required at all. Of course, the modal can be dismissed just like in the previously described use case.
Implementing this on your own web site
You correctly identified that there are both client side and server side dimensions to this technique. The beauty of it is that, when implemented correctly, it is completely transparent to users. The only thing they will (not) notice is that there are fewer full page loads.
The references sprinkled throughout this answer should provide good starting points for you!
Final notes
All of this is sometimes also used to create smooth transitions between pages of the same site. In those cases, full pages are loaded asynchronously (as per (c)) and then a smooth transition, usually involving animations, is performed. There are many, many, many, many examples, tutorials and libraries for this. You may want to search for PJAX to learn and find more.
__________
1Not really a single API maybe, but an approach or mindset. See the MDN reference for more details.
