Vue.js：Vueで作成したページは漏れなくSPA？ちょっとした疑問解決

Vue.js：Vueで作成したページはモレなくSPA？ちょっとした疑問解決

今までSEO的に向いていないとの意見を聞いて積極的にかかわってこなかったSPA。
いろんな仲間内案件を熟し、外部案件に手を出そうとすると募集要件の多くにSPAが入ってきます。
そんな中で理解しようと書きながら勉強していたのですが、どうにも悩むポイントがありました。

Vueで作成したページはSPAなの？

今回はそんな疑問をまとめていきたいと思います。
SPAとMPAの違いについての記事はよく見かけますが「でどういう事？」と思った方の一助になれれば。

SPA = Single Page Application　(訳：単一ページのアプリ)
MPA = Multiple Page Application　(訳：複数ページのアプリ)

SPAの対局にあるのがMPAで、従来のページ構成はこちら。
ページごとにHTMLやJSなどのパーツを読み込んでサイトを表示していきます。
例えば、共通のヘッダーやフッターはページ遷移の度に毎回読み込まれ、毎回表示プロセスが動きます。

一方、SPAでは最初にサイト情報を読み込み、JSによって表示をコントロールします。
最初に読み込んだページから遷移しない為、共通パーツはそのまま利用され再描写されません。
こんな理由で初回の読込には時間がかかるけどサイト内のResponseが早いといわれています。

SPA体験の初手で思う疑問がコレです。

悩みの原因はMPAに慣れているが故に起こる思い込みです。

つまりは [ SPA= 一つのURLで作成されているサイト ]であると思い込んでいることに原因があります。

「SPAはページ遷移しないの？」

答えは【 画面遷移はするけどページ遷移はしない 】です。
画面を変える指示をURLで行う(GETで行う)ことで、読み込むスクリプトを変更してページ遷移をせずに画面遷移を行っています。

リンクをクリックした際にブラウザのロードが回ればMPA、回らなければSPA

超高速サイトだと回らないこともあるかもしれませんが、基本的にページ遷移が発生するときには【読込中マーク】がくるくる回ってます。

そうやって見てみると、まだまだSPAが少ないことが判ると思います。

残念ながらそんなことはありません。
Vueで書いてもMPAとなる事があります。具体的には下のようなリンクの書き方で変わります。

Vue.jsでフロントを記載した場合、サイト表示の段取りは次のような姿になっています。

URLでサイトアクセス
Vueプロジェクト\public\index.html が呼ばれる
Vueプロジェクト\src\main.js を読み import APP from の指示する場所を確認（※何もしてなければApp.vue）
Vueプロジェクト\src\main.js を読み import router from の指示する場所を確認 (※Vue-routerの場合は ./router が標準)
import APP from で指示されたファイルを読み込み ※これサイトBodyに展開
URLからGETを取得
router\index.js を読み GETのPATH該当箇所に割り当てられたcomponent を確認
router\index.js内componentで指示された場所を読み込み
5のファイル内の <router-view/> で指示された場所に 7のファイルを展開
画面が描写される

上の段取りの中の 6 を発火させ【7 ～ 9】のパーツを再開します。
そのため、ページの基盤となっている2つのパーツ【2 : index.html / 3 : App.vue】のリロードは実行されません。
※App.vueは router-view の中身が変わるだけでApp.vue自体は動かない

つまり、index.htmlが固定されているのでページ遷移はなく<router-view/> の中身が変わるので画面遷移があると。

[ 1 ] からの再開となります。そのため、index.htmlの読込から再度行う事となりMPAでの構築となります。

こうやってまとめるとSPAの姿が明確になってきますね。
HTMLに慣れているおかげで、ついついリンクをaタグで書いてしまうのですが気を付けないと。