ume

rails ✖️react spaとは

spaとは

⇨シングルページアプリケーション.
従来は/postsというリクエストを送ったらhtmlが生成され /postsで生成されたページの中のテストというリンクを押すと/testというリクエストが送られてまた新しいhtml生成される 要は複数のページが存在していることになる。

しかしspaだと 複数のページが存在してるように見えるけど実は1つのページで全て完結している.

spaでも最初/postsというところにリクエストを送るとhtmlが生成される。ただこのhtmlの中に全てのページ(/testのリクエストで生成されるHTMLなど)がこのhtmlに入っている場合もある。なので/testにページ遷移する際リクエストを送らずに/testのhtmlが生成されるので高速にページ遷移することが可能でuxの向上につながる。この時もちろんurlは/posts⇨/testに変わっている。

spaで画面表示している仕組み

SPAでは多くの場合「ルーティング」という技術を用いています。

〇ルーティングについて https://qiita.com/ozaki25/items/41e3af4679c81a204284 ルーティングでは「HTMLをリクエストしているように見えても実際にはリクエストしない」動きをします。 例えば現在の画面のURLが「/Home」であったとします。画面のリンクから「/About」へ遷移したように見えてもSPAの中でURLをハンドリングしているので実際にサーバへは「/About」へのリクエストがされているのではなくjavascriptでアドレスバーを「/About」へ書き換えるだけの動作が行われます。 持ちろん「/About」を表示するために、DOMとしてレンダリングする情報が足りなければサーバへAjaxなどでリクエストをするかもしれません。「/About」を表示する情報がSPAページを初回でダウンロードした時に全て含まれているのであればサーバへリクエストをする必要はないのリクエストをさせません Reactが動くと javascriptによるDOM操作で作られていくという流れになります。 固定でレンダリングさせるという部分が無いのでDOM上の要素数が多いと初期表示に時間がかかる事があります。(最近では余り気にならないですが) そのような場合はスプラッシュ画面という裏でレンダリングをさせている間に見せる画面を用意する事もあります。

参考: https://blog.adobe.com/jp/publish/2020/09/16/cc-web-examples-and-benefits-of-a-mobile-app-splash-screen