WEBページにサイドメニューを表示したまま画面遷移をしたい

##やりたいこと
現在サイドメニューがあるWEBページを製作しております。
そこで、以下のサイトのようにサイドメニューの状態を保持したまま、メインの部分の画面遷移を行いたいと考えております。
https://help.apple.com/keynote/mac/6.6/?lang=ja#/

##わからないこと
上記のようなサイトを作成する場合、どういった技術を使用するのがベストプラクティスなんでしょうか？

##やったこと
①HTML・CSSを使って全てのページにサイドメニューを固定表示
⇒　上記の参考にしたサイトでは毎回新しいhtmlを読み込んでいるようには見えません。sectionタグの中身を何らかの方法で入れ替えているのでしょうか？サイドメニュークリック時にdisplayプロパティを変更することで実現できるとは思いますが、相当大きなhtmlファイルになるのではないでしょうか。

②index.htmlにサイドメニューとiframeを用意し、iframeの中身を入れ替える
⇒理想に近いものが作れましたが、iframeについて調べているとiframeの使用用途とは少し違うのではと感じました。

##やろうとしているがまだできていないこと
私が今考えているwebアプリケーションがSPAに当てはまると思い、Vueを使用すると作成できるのではと考えております。

よろしくお願いいたします。

mari.rinn

2020/04/09 06:47

＞上記の参考にしたサイトでは毎回新しいhtmlを読み込んでいるようには見えません。サイドメニューやヘッダーのとこが完全に同じレイアウトだと、全く変わったと感じることなくページ遷移しますよ。

rein

2020/04/09 06:59

反応いただきありがとうございます！ Chromeの検証機能からNetworkの項目を確認すると、サイドメニュークリック時にメイン部分のhtmlファイルのみサーバから取得しているので、サイドメニュー・ヘッダーは再読み込みすることなくメイン部分のみ入れ替えているのかと思いました。共通部分はブラウザにキャッシュされているためサーバから取得する必要がないということなのでしょうか？