流れ

Ajaxを使用して、サーバーから新しいコンテンツを取得します。
新しいコンテンツを受信した後、JavaScriptを使用してページのDOMを更新します。これにより、ページがフラッシュせずにコンテンツが更新されます。
history.pushState()を使用して、ブラウザのアドレスバーに新しいURLを表示します。これにより、ページのURLが変更され、ブラウザの戻る/進むボタンを使用してページの履歴をナビゲートできるようになります。

例：

// リンクのクリックイベントを取得
document.querySelector('a').addEventListener('click', function(e) {
  // リンクのデフォルトの動作を防止
  e.preventDefault();

  // Ajaxを使用して新しいページコンテンツを取得
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/new-page');
  xhr.onload = function() {
    // ページコンテンツを更新
    document.querySelector('#content').innerHTML = xhr.responseText;

    // history.pushState()を使用してURLを更新
    history.pushState({}, '', '/new-page');
  };
  xhr.send();
});

この例では、クリックイベントを使用してAjaxを開始し、新しいコンテンツを取得し、DOMを更新し、URLを変更します。