Murga

個人的に言いたいコト・主張・気持ち。

React と Next、Vue と Nuxt、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 を選ぶ必要はないようだ。

React.js & Next.js超入門

React.js & Next.js超入門

Vue (Vue CLI・Vite) と Nuxt.js

  • Vue CLI・Vite
    • ツールチェーン
    • ボイラープレート的に使った後は自由度が高い
  • Nuxt.js
    • SSR など必要になりそうなモノが全部入っているフレームワーク
    • CoC。規約がしっかりしている

SSR が欲しい、チームで規約が欲しいなら Nuxt.js。Vue CLI や、Vue 3 で用意されている Vite なんかは、フロントエンドオンリーの SPA 用って感じ。自由度も高い。

Angular は? → Angular Universal

Angular そのものが堅牢で、フレームワークの様相を呈していて、Angular CLI はそれをサポートする立場とすると、Next.js や Nuxt.js にほとんど相当しているといえる。

SSR に対応する、Universal JS を実現するという意味であれば、Angular Universal がその位置に来るかな。

もう少しバックエンドもサポートするなら、Angular に近い雰囲気でバックエンドが作れる NestJS の Universal モジュールを使うのが良いかと。

Universal JavaScript とは

サーバサイドもクライアントサイドも JS にすることでコードが共通化できるという設計論。

Svelte と Sapper

  • Svelte
    • コンパイラ。成果物はフロントエンドオンリーといえる
  • Sapper
    • ルーティング、SSR など全部入りのフレームワーク

Next.js や Nuxt.js でお馴染みの構成。フロントオンリーの Svelte、全部入りフレームワークの Sapper。

以上

  • 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

こんな感じかな。

Vue.js&Nuxt.js超入門

Vue.js&Nuxt.js超入門