こんにちは。なかにしです。
今日の記事は結構有用ですよ！！！
ぜひご覧下さいませ。
あらすじ
現在アサインしている案件において、こんな要望がありました。
「ボタンを押したときにデータを取り出せるようにして欲しい。」
ここで疑問が。
①フロントで非同期処理を使用する
②バックのみでルーティングで処理する
どっちがいいんだろう。
案件先は動けばいい派なのでどっちでもいいらしいのですが、個人的に気になったので調べてみました。
前提
今回はFWをLaravel、DBをMariaDBで構築しています。
フロント非同期処理はLaravel × React、バックのみの処理はLaravel単体で実践していきます。
フロントで非同期処理
LaravelにReactを入れて非同期処理します。
こちらのようにAxiousを使用していきます。
初めてLaravel × React をやってみたのですが、謎のエラーが。
▽参考画像(ネットから似たの拾ってきました)
Laravel側とReact側でサーバーが違うのが原因らしいです。
今回、Laravelはlocalhost:8000、Reactはlocalhost:3000でサーバーを立てており、ReactからLaravelにリクエストを行った為、エラってしまいました。
解決の為にはミドルウェアの設定が必要らしいので、こちらの通りにやって解決しました。
ちなみにこのエラー、初心者潰しって言われてるらしいですね。怖。
▽完成！！
同じ処理をバックのみで再現していきます。
バックで処理
Laravel のみで実装します。
ボタンのonclickにrouteでルーティングを付け、コントローラーで処理します。
▽こんな感じ
<button onclick="location.href='{{ route('index') }}'">テーブル作成！</button>▽完成！
今回の流れは
①ボタンクリック
②’index’に飛ぶ
③コントローラーでデータを取ってくる
④データを返す
⑤viewで表示
にしました！
バックとフロントの違い
違いは画面遷移を挟むかどうかのみです。
じゃあどっちでもよくね？って個人的には思うのですが、一般的にはフロントで非同期処理をする方が良いと言われています。
何か回線が遅いときに良くないみたいなのを耳にしたことがあったので、高速3G環境と低速3G環境を用意し、フロントとバックで何か変わるのか検証してみました！
3G環境は開発ツールで用意できます。
マジで何でもできるなこれ…すご…
■高速3G環境
▽フロント
▽バック
▽結果
両方とも約2秒でした。
まあちょっとバックの方が遅いかな？くらいですね。
あまり気になりませんでした。
■低速3G環境
▽フロント
▽バック
▽結果
フロントは約2秒、バックは約5秒でした。
結構変わりますね。
結論：フロントの勝利！
今回の検証においてはフロントでの非同期処理の勝利でした！
表示までのスピードに約2.5倍の差がでているので、今回のように小規模だったら問題ないですが、大規模になってくるとユーザーへのストレスになる可能性が高いと思います。
ページ遷移は最小限に抑えた方が良さそうですね。
非同期様様です🙌
さいごに
画面遷移は最小限にすることでユーザーへの負担を減らすことができるという根拠を得たので、今後はクライアント様に自信を持って提案していきます。
しかしながら、サーバー側だけで作成した方が楽という側面もあるので、リソースに合わせて柔軟に対応していくのが不可欠ですね。
なにげに今回の検証での一番の学びは「開発ツールの有能さ」でした😎
もっと色々なことができそうなので、開発ツールで遊んでみた！も作ろうかな…
今回はここまで！
Enjoy Hacking!!
