今までサーバー側をしてこなかったせいでSPAに対する印象があまりよくなかったのですが、サーバー側の設定をうまくすると通常のサイトとほとんど同様のページを作れると気がついたので構築してみました。
なぜSPAを毛嫌いしていたのか
かなり単純な理由なのですが、URLが気持ちわるいと思っていたためです。http://example.com/#/page/1のように、ハッシュが必要なこれはイケてないと思っていました。
しかし、実はサーバー側の設定をすれば http://example.com/page/1のように普通のURLでアクセスできます。
HTML5 History モード · vue-router
どうして普通のURLでアクセスできるのか
SPAは、index.htmlに対するアクセスをルーティングで捌くという仕組みを取っています。このしくみのため、すべてのアクセスをindex.htmlに送らねばなりません。そのためサーバー側の設定をいじれない場合、URLが http://example.com/#/page/1とならざるを得なかったのです。
しかし、サーバーの設定で「http://example.com/*に対するアクセスはどれもindex.htmlを返す」とすることができます。こうするとindex.html内でURLを見てルーティングができます。
個人的に構築してみて思ったこと
今回僕が構築したページはこちらです。
このSPAは http://pandanoir.net/vue-sample/:year/:month (:year、:month部分は任意の数字。当てはまらない場合は今月)でアクセスすると、その月のカレンダーを表示するだけのものです。
SPAというと、homeやabout、articlesのように普通のサイトと全く同じように構築できます。しかし、初期コストが高く描画に時間が余計にかかってしまいます。これは個人的にはページ遷移をヌルヌルできたり、通信コストを抑えられることよりも高くつくと思ってしまいます。
ただ、今回のようにパラメータを受け取りたいだけというケースにおいては、初期コストが存在しない(大きくない)のでいいと思います。
マテリアルデザインと組み合わせるとかなりいい感じになりそうだなと今ふと思いました。Vue.jsのページ遷移と相性いいマテリアルデザインFW誰か作って
