React と Next、Vue と Nuxt、Svelte と Sapper
もう語り尽くされたであろう、「コレってどう違うの？」ネタまとめ。
目次
- React (create-react-app) と Next.js
- Vue (Vue CLI・Vite) と Nuxt.js
- Angular は？ → Angular Universal
- Svelte と Sapper
- 以上
React (create-react-app) と Next.js
- Create React App
- SPA・フロントエンドオンリーのツールチェーン
- どちらかというと学習用。ルーティングなどが含まれていない
- Next.js
- SSR などを取り揃えたフレームワーク
- Facebook ではなく Vercel (旧 Zeit) が作っている
- Razzle という似たような全部入りフレームワークもある
React の場合は、とりあえず何か作るなら CRA ではなく Next.js で始めるのが良いっぽい。SSR の有無で CRA を選ぶ必要はないようだ。
Vue (Vue CLI・Vite) と Nuxt.js
- Vue CLI・Vite
- ツールチェーン
- ボイラープレート的に使った後は自由度が高い
- Nuxt.js
- SSR など必要になりそうなモノが全部入っているフレームワーク
- CoC。規約がしっかりしている
SSR が欲しい、チームで規約が欲しいなら Nuxt.js。Vue CLI や、Vue 3 で用意されている Vite なんかは、フロントエンドオンリーの SPA 用って感じ。自由度も高い。
- 参考 : NUXT いるのかどうか (Vue CLI 3 との比較) - Qiita
- 参考 : 【Vue.js】Nuxt.js ？ VueCLI ？それは何、仲間なの？ - Qiita
- 参考 : Nuxt.jsいらない説 - GAミント至上主義
Angular は？ → Angular Universal
Angular そのものが堅牢で、フレームワークの様相を呈していて、Angular CLI はそれをサポートする立場とすると、Next.js や Nuxt.js にほとんど相当しているといえる。
SSR に対応する、Universal JS を実現するという意味であれば、Angular Universal がその位置に来るかな。
もう少しバックエンドもサポートするなら、Angular に近い雰囲気でバックエンドが作れる NestJS の Universal モジュールを使うのが良いかと。
- 参考 : NestJSでAngularUniversalを導入する - Qiita
- 参考 : GitHub - nestjs/ng-universal: Angular Universal module for Nest framework (node.js) 🌷
Universal JavaScript とは
サーバサイドもクライアントサイドも JS にすることでコードが共通化できるという設計論。
Svelte と Sapper
- Svelte
- コンパイラ。成果物はフロントエンドオンリーといえる
- Sapper
- ルーティング、SSR など全部入りのフレームワーク
Next.js や Nuxt.js でお馴染みの構成。フロントオンリーの Svelte、全部入りフレームワークの Sapper。
- 参考 : 最近名前をよく見かけるsvelte/sapperを試してみた その1 導入編 - Qiita
- 参考 : svelteとsapperでwebアプリを作ってherokuにデプロイする(した)方法 | Qrunch（クランチ）
以上
- React やるなら Next.js 一択
- SPA でサクッとやりたければ CRA でも良いかもだが…
- Vue でフロントだけ作るなら Vue CLI or Vite
- Vue で SSR・大規模開発するなら Nuxt.js
- Angular やるなら Angular CLI 一択
- SSR したけりゃ Angular Universal を追加
- Svelte でフロントだけ作るなら Svelte オンリー
- Svelte で SSR したけりゃ Sapper
こんな感じかな。