質問: ### 前提・実現したいこと 勉強のために、JavaScript フレームワークをつかったアプリケーションを作成したいと考えています。 しかし、SSR、SPA どちらでも、どのように使えばいいかわかっておりません。 はじめは TODO アプリや掲示板をつくることから始めようと思っていますが、 その場合のバックエンドの構成はどのようになるのでしょうか。 バックエンドのルーティングとか気になります。 もし可能なら、Vue/React + Rails/Sinatra/Laravel あたりを例に教えていただけますと幸いです。 ### 気になるところ? 1. SPA の場合は、どのパスにアクセスしても同じ view を返すようにするのか。もしそうなら、どうやって各処理の api を叩くのか。 2. SSR の場合は、api は必要ないのか。 ### 補足情報(FW/ツールのバージョンなど) * React.js * Vue.js * Laravel * Ruby on Rails * Sinatra よろしくお願いします。
回答: > > あたりを例に教えていただけますと幸いです。 > > > ご自分で各フレームワークのチュートリアルをこなして下さい。 > > 1. SPA の場合は、どのパスにアクセスしても同じ view を返すようにするのか。もしそうなら、どうやって各処理の api を叩くのか。 > > > SPAは従来通りHTML・CSS・JavaScript(以下JS)でページを組み立てます。 SPA(JSフレームワーク)の場合ではJS部分の比重が大きくなります。 JSフレームワークはテンプレート文字列と、特定スコープ内の変数を利用して動的にDOMツリーを組み立てます。 この変数はオブザーバパターンにより拡張された変数で、フレームワークが提供している方法を用いて変数を変更すると、即座にDOMがあるべき姿に書き換わります(データバインディング) APIの使い方はAjax通信で後付けで取りにいきます。 そのAjax通信で得た値をJSフレームワーク指定の方法で変数に反映してやることでDOMの更新を促します。 > > 2. SSR の場合は、api は必要ないのか。 > > > SPAはDOMを描画する為のプラモデルのようなものです。 ランナーからニッパーで切り離し、ヤスリをかけ、着色してようやく完成という作業を全てJSが行う為、 DOMの生成に時間が掛かったりSEOで悪影響が出る可能性があります。 従ってそのページのDOMが組み上がった状態を初期状態として渡してやることで、 これらの問題を解消することが目的です。 しかしどの道他のページの情報をアレもこれも盛り込むわけにはいきませんので、 結局裏でAPI対してAjax通信を飛ばして変数を動的に書き換える仕組みが必要になります。