質問: 表題について、以下のような場合、htmlで返すのが適切だと思うのですがいかがでしょうか? ### 実現したい仕様 初回アクセス時のレスポンスが以下のようなものとします。 ``` データ1 データ2 データ3 ``` その後、ajax通信によりページ遷移無しでデータ4以降が読み込まれます。 ``` ツイート1 ツイート2 ツイート3 ツイート4 ツイート5 ツイート6 ... ``` ### 上記を実現する方法A jsonで受け取り、jsでhtmlに形成してappend。 ``` $.ajax({ url: 'hoge.php', dataType: 'json' }).done(function(json) { // json : ["データ4","データ5","データ6"] json.forEach(function(e) { $('ul').append($('').append(e)); }); }); ``` ### 上記を実現する方法B サーバーでhtmlに形成し、jsはappendするだけ。 ``` $.ajax({ url: 'hoge.php', dataType: 'html' }).done(function(html) { // html : データ4データ5データ6 $('ul').append(html); }); ``` ### Bの方が良いのでは? 上記2つのうち、フロントの方に求められるレスポンスは圧倒的にAのjson形式が多いように思います。 初回レスポンスは当然htmlなのに、ajaxで追加データ、となった途端にjson形式が好まれるのは何故でしょうか? 今回の場合、Aだとデータをhtml化する処理がサーバーにもフロントにも作られることになってしまいイマイチな気がします。 jsonの方がデータ量が少ないとしても、その分jsにデータをhtml化する処理を追加しなければいけませんし、よほど大きなデータを頻繁にやりとりするサイトでなければこの点で優位になるようには思えません。 また、jsonなら、で囲む以外にもフロント次第でにしたりと色々な場面へ展開できますが、パターンが限られているなら、GETパラメータなりでhoge.php内を分岐させればいいと思います。 ### もしjsでhtml化したい場合 最近の流行りでもありますが、データ1~3含め全てをjsがhtml化するとします。 しかし、これを実現するために、初回レスポンスの直後に再びajax通信でサーバへjsonデータをリクエストしているのを見かけますが、無駄に通信回数が増えているように感じます。 初回レスポンスの時点で初期表示に必要なjson文字列をhtml内にインクルードして返すのではだめなのでしょうか? ``` ``` ### 質問のまとめ 長くなって申し訳ありません。まとめると以下2点についてご意見を頂きたいです。 * 今回の例の場合、Bの方法のようにhtml形式でやりとりするのが適切な気がするのですがいかがでしょうか? * 初回表示の3件もjsonで受け取るにしても、わざわざajax通信せずにhtml内にインクルードすればいいと思うのですがいかがでしょうか? よろしくお願いたします。
回答: JSONにする理由はもちろんデータ量がHTMLと比べて少なくなるというのもありますが、 例えばリストの表示をからへ変更したりする場合、サーバー側で行っているHTML生成処理も変更が必要となります。HTMLで返すとなると、このようにクライアントとサーバーの依存度が高くなってしまいメンテナンス性が悪くなってしまいます。 あと、初回表示のデータはHTMLにインクルードするというのはリクエスト1回で済むためとても有用です。 ここ最近は、Vue.jsやReact.jsといったフレームワークを使用するのが主流となってきてますが、 初回アクセスの時のみサーバーサイドレンダリングをおこなうという方法により、ページ表示速度を早くするということもとられています。 (私は、サーバーサイドレンダリングではなく初回データのインクルードのほうがいいと思うんですけどね)