Q&A
gmail.com とか…。
VueCLIなどを用いてSPAで開発するメリットについて、疑問があり質問させて貰いました。
SPAでは、初期表示が遅いといったデメリットがありますが、こちらは、Nuxt.jsの「SSR」を活用することで解消できるかと思います。
それでしたら、最初からNuxt.jsを使用し「SPA」の欠点を補うことで開発できるのではないかと思っています。
自分は初期表示が遅いというデメリットはUX的に考えてもかなり大きいものであるかと考えているのですが、「SSR」ではなく「SPA」を選択するのにはどのような理由があるのでしょうか。
また、初期表示が遅くとも問題のないアプリがありましたら、どのようなアプリでSPAが採用されているかを知りたいと思っております為、教えて頂けましたら幸いです。
参照した記事
・shimablogs
・hatenablog
SSRとSSG混じってないだろうか・・・
回答2件
0
SSR は確かに速いです。しかし動的で複雑な状態を持ったアプリケーションを構築するのには向いていません。なぜかと言えば毎回サーバーでビルドしなければいけないため SSR の利点である「速い」というところが失われてしまうからです。SPA に向くのは一つのページにとどまりながら状態が多数変化するようなアプリケーションです。例えばチャットですね。これは SSR で構成するより SPA で構成したほうがメリットが大きくなります。いろんなサービスのダッシュボードなんかも SPA に向いています。
また、SSR はデプロイの手間がかかるという点も見逃せません。もちろん Vercel や Netlify などホスティングサービスを使えば良いかもしれませんが、規模が大きくなればコストに見合わなくなってくるかもしれません。そしてそのような環境を自分自身で構築するには手間と時間がかかります。SPA であればそれほど手間なく構築できるため SSR よりはサーバーの負担が減ると考えられます。
とはいえ SSR が普及していろんなサービスが置き換えられていくことは間違いないでしょう。その中で適材適所を見分けるノウハウも溜まっていくと思いますし、もしかしたら SSR すら覆すような大転換が起こるかもしれません。それを楽しみに開発に勤しむのも良いかもしれませんね。
投稿2021/01/12 10:38
総合スコア2853
ご回答ありがとうございます。
>なぜかと言えば毎回サーバーでビルドしなければいけないため SSR の利点である「速い」というところが失われてしまうからです。
こちらですが、Nuxt.jsのSSRを使用することで、初回ローディングのみサーバー側でレンダリングして返してくれる為、SPAの欠点を克服し且つ良いところを取り入れた形となっている為、使わない手はないのではないかなとは思っているのですよね。
https://qiita.com/nishinoshake/items/f42e2f03663b00b5886d
確かに、速さに関しては適当こきました。すみません。しかしそれでも SPA すべてを SSR/SSG フレームワークで塗り替えることはないと思っています。Next.js を使って感動した身としてでもです。それはページ間の状態の保持が柔軟に出来ないという状態管理周りの問題があります。SSR/SSG フレームワークでは状態はページごとに分割され、ページをまたいでの状態はページ単位でのみ可能です。これは利点でもありますが、複雑で細かい状態管理を必要とをする SPA では大きな足かせです。また、状態管理の簡素さ故非同期通信などの用途には向いていません。非同期通信は状態管理の塊です。このようなアプリケーションではページが分割されているのではなく、一つのページで状態を管理したほうが都合がよいのです。
ありがとうございます。
自分で色々と開発し経験しなければわからない部分も出てくるかと思いますし、SSR/SSG/SPAのメリット、デメリットが実感できるよう、開発経験を積んでいきたいと思います。
0
自分は初期表示が遅いというデメリットはかなり大きいものであるかと考えているのですが
そうでないアプリケーションもありえます。
投稿2021/01/12 10:23
総合スコア145183
> そうでないアプリケーションもありえます。
こちらですが、例えばどのようなアプリが考えられますでしょうか...?
ログインユーザーだけが使うような環境の場合、1回目のアクセスでService Workerを構築してしまえば、2回目以降のアクセスの際にはJavaScriptのダウンロードは不要となるので、スピードの問題は概ね解決します。
「純粋に1回目のアクセスの比率」が低ければ、そこが遅くても全体から言えばほぼ影響はありません。
あなたの回答
tips
プレビュー
