s_kajigo
@s_kajigo (kaji shogo)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

フロントとサーバーサイドのどちらでデータを絞り込むべきか

現在 React、Railsでwebアプリケーションを作成しながら学習中です。
タイトルの通りなのですが、データを絞り込んで使用したい場合に、
1、バックエンド側で絞り込みを行い、フロントで表示する方法
と、
2、バックエンドからある程度必要なテーブルの情報全てを受け取ってstateとして管理し、必要に応じてフロント側で絞り込みを行うの方法
とどちらがパフォーマンス、セキュリティの面で良い選択とされるのでしょうか?

調べながらそれぞれの方法について以下のように考えました。
1、
データ量が多い場合にはフロント側よりも処理が早い。
複数の条件で絞り込む場合返すデータの条件が増えるのでフロントとの通信回数が増えてしまう。
2、
stateで管理したデータを好きなようにその都度絞り込んで使用したり、propsとしてデータを受渡してい句ことができるのでバックエンドとの通信回数を減らせる。
データの量が多くなったときに動作が重くなる可能性がある。
不必要な情報をフロントに預けるとセキュリティ的に危険がある。

デメリットを見ると1の方がいいのかなと思うのですが、通信回数が増えることでの速度低下と、1の方が描くコードが増えるような気がして悩んでいます。
自分で調べた結果だといまひとつしっくりくる結論に至れなかったので、ご指摘や解説いただけると大変ありがたいです。

0

3Answer

現状ではどちらが良いという結論は無いです。
いま挙がっているパフォーマンスやセキュリティなどの判断材料がそもそも状況次第です。
そのアプリケーションは実際に通信回数が問題になるようなものですか?公開できないセキュアな情報を扱うのですか?
実際にやってみないとわからないこともあるでしょう。その時まで判断を遅らせる考えもあります。

パフォーマンスやセキュリティの他には「ロジックをどちらで持つべきか」というのもあります。
例えばフロントエンドとバックエンドの担当がそれぞれ別の人、別のチーム、別の会社という状況では変更にかかるコストも変わってきます。

コストは技術的なものだけではなく、コミュニケーションやお金にもかかります。そういった諸々の状況を考えて判断することになります。

2Like

Comments

  1. @s_kajigo

    Questioner

    選択の判断材料について大変勉強になりました。
    初めての制作物なので、一旦実装してから検討していこうかと思います。
    ありがとうございました!

 私たちはfetchなどの非同期が一般化し、ネット帯域にゆとりがある時代の恩恵を享受しています。
 DBにおいてもネットに負担をかけないjoinやサブクエリーでサーバー側で処理する時代から、サーバー側に極力join負担をかけないために、親テーブル(一覧)を単体Getし、子テーブル(明細)を単体getする2段階クエリーも登場しています。(NonSQL)

さて、時代が変わっても 1 のサーバー側で絞り込むのが常套手段ではと考えます。
 但し、全てSQL to json でサーバー側が担い、クライアント側は json to html を担うのがよいのでは?と考えています。
 ここで非同期処理とjavascriptライブラリーがその本領を発揮します。

 また、今流行りのapi,レスポンシブにも順応し易いのではないでしょうか?
 サーバー側は3者に同じjsonを返してクライアント側はweb,api,EXCLEででjsonを受け取り処理します。シンプルな開発が可能です。

 暇人x in 鶴巻温泉

2Like

Comments

  1. @s_kajigo

    Questioner

    駆け出しの身でありますので、今回は常套手段とされる1の方法で実装してみようかと思います。
    回答ありがとうございます!

データ100万件をフロントで受け取って絞り込みとかしたらやばいですよね

セキュリティ問題は別なので問題ないデータだけをフロントに渡しましょう

1Like

Comments

  1. @s_kajigo

    Questioner

    問題ないデータがどの範囲なのかをまず吟味していきたいと思います。
    回答ありがとうございます!

Your answer might help someone💌