Axios遅すぎ

#序章
こんにちは。

最近はちょっとしたWebの副業をいただきまして、ここぞとばかりにVue.jsをぶっこんでみています。
業務経験ありません。勉強会で数時間触っただけです。ワイルドだろぅ？(古い

その中でAxiosを使ったら遅すぎて使えなかった、ということと、回避策の話をします。

#どんな案件か
どんな案件かというと、自社製品の検索&表示ページを作るというもの。
しかし商品情報の管理はDBは使わずにファイルで行きたいらしい。

ファイルでもまぁ件数が少なければいけるか、というちょっと綱渡りな案件。

私：「DB使わないんですか？」
子クライアント（以下ク）：「費用の問題か知識の問題か知らないけど使いたくないらしい」
私：「」

ページングとか、レスポンスとか考えるとあったほうがいいと思うんだけどなぁ。
しかしファイルで行きたいというから仕方がない。

構想としては

1. アップローダーを用意し、CSV(でデータを管理しているらしい)をJSONに変換して保存
2. JSONをVue.jsで表示＆絞り込み

ということになった。

#雑感
勉強会の中でVue.jsに数時間触れ合った私の雑感としては

Axiosでデータを読み込で表示するやつなら作ったことあるからいけるっしょ

向かう所敵なしである。

PHPでCSVをjson形式に変換し、サーバーに設置する。
それをAxiosで読み込む。
完璧だぜ！！

#Axios鬼遅い
と思っていたら、Axiosで読み込む部分が鬼遅い。

main.js

...
created: {
  // 鬼遅い
  axios.get("/search/productList.json") 
  .then(
    response => {
      this.items = response.data.data;
    });
}
...

ク：「これは遅いね〜〜」
私：「ですよね〜^^;」

まずい。
jsonの読み込みで体感２秒くらいかかってる。
どうにかしないといけない。

そこで私は、
私：「（ファイルの読み込みでオーバーヘッドあるし、ファイル内に宣言してしまおう）」

と思い立ちました。

#対応
要するに、

1. Vueのインスタンスを生成する前に外部でjsの値として宣言
2. Vueのインスタンスに値を渡す

↓↓↓↓

index.php

<script type="text/javascript">
var _items = <?php echo file_get_contents("/path/to/data/as/js/value"); ?>; //たくさんのデータを宣言する
</script>

main.js

new Vue({
   el: '#app',
   data: {
     items: _items, // さっきのやつ
   },
   ...
});

#結果
どうでしょう。
結果、表示するまでに１秒以内に無事収まるようになりました。！

ク：「いい感じだね！」
私：「（あぶね〜〜）」

#まとめ
今回のようにファイルが外部のAPI取得などでなくデータが頻繁に更新されないような場合は本体に宣言してしまったほうが早いです。
特に、なんでもクライアントサイドではなくてサーバーサイドで処理をして結果をサーバー(Nginxなど)にキャッシュさせてしまえばいいというケースって結構あると思うんですよね。

また、外部APIでも、上手くやれば上記のような対応ができると思います。
（その場合サーバーのキャッシュを消すまでに古いデータが表示されるので要検討）

なんでもクライアントサイドはいかん！
というお話でした。

[追記]
わざわざPHPで読み込まず、jsファイルにして読み込んでしまうほうがもっといいんですが、
明日クライアントに見せるようなので一旦後回しデス☆

キーワード： Axios 遅い 重い