2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ルーティングなしSPAであっても素のReactでなくNext.jsやReact-Router v7(Remix)を使うべき理由

Posted at

この記事は何か?

React公式のこのページの内容を読んだメモです
https://ja.react.dev/learn/start-a-new-react-project

公式ドキュメントに書かれている見解

ルーティングのないSPAであってもフレームワーク (Next.jsやRemixなど) を使うべき
という見解が示されています

React をフレームワークなしで使うことも確かに可能です。既存のページに React を追加する場合はそのようにします。しかし、新しいアプリやサイトをフルで React を使って構築する場合は、フレームワークを使用することをお勧めします。

SSRやSSG、pre-renderingをやろうと思ったら、あるいはSPAであってもルーティングをやろうと思ったらNext.jsやRemix、React Routerなどを選択するのが一般的だと思います。ですが、ルーティングなしのSPAであってもフレームワークを使うべきとしているのは何故でしょうか

理由

  • 最初はルーティングやデータ取得が必要なくても、後になって必要になるケースがあるし、それをライブラリで追加してくとJavascriptバンドルが大きくなって煩雑になるし、後からフレームワークを適用するのも大変な労力が必要になる
  • 当初はデータ取得の規模が小さい間は良くても、データ取得の要件が複雑になっていくと対応できなくなりアプリが非常に遅く感じられるようになる
  • ネットワーク環境が悪いユーザーや端末スペックが低いユーザーが増えると後からサーバーサイドレンダリングが必要になるケースがある
  • アプリが成長すると「アプリに必要な最小限のコードを 1 回のクライアント・サーバ間の往復で送信しつつ、並行してページ表示に必要なデータも送信したい」「ページが段階的に読み込まれ、JavaScript コードが実行すらされないうちから操作可能になるプログレッシブ・エンハンスメントのサポートが欲しい」「どこにでもホストでき JavaScript が無効になっていても動作する、マーケティングページのための完全に静的な HTML ファイルが入ったフォルダを生成したい」などというニーズが出てきてしまう
  • 紹介されているReactフレームワークを使えばこれらの問題をデフォルトで解決している

結論

まとめると以下となりそうです
最初は要らなくてもアプリが成長したらほしくなるんだから最初からつかっとけ

感想

言われてみると確かにその通りなんだけど、覚えること多くて大変すぎんかフロントエンド
アプリが成長してから苦労するよりマシと言われたら完全同意

しょうもないメモを読んでくれてありがとね

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?