React

CRA (Create React App), Next.JS, Gatsby【 どう使い分けるのか?】

React

どうも!シドニー在住エンジニアのワタです。

今日は、Reactを使用して何かを作りたいときに候補に上がるであろう、CRA (Create React App), Next.JS, Gatsbyのそれぞれの特徴、利点、欠点などを比較します。

CRA(Create React App)の特徴

Create React AppCreate React App

出典:https://create-react-app.dev/

  • クライアントサイドでレンダリングするので、SEOはほぼ捨てることになる。
  • データの更新が多くあってもちろん大丈夫。
  • オープンソースであるが、Facebookによりサポートされていて、大きなコミュニティーがある。

Next.jsの特徴

Next.jsNext.js

出典:https://nextjs.org/

  • デフォルトでSSRに対応。サーバーサイドでレンダーする。URLごとに、必要なHTMLコードをサーバー側で生成し、それをブラウザに渡している。つまり、通常のReactとは全く別のことをしているので、空っぽのdivをブラウザで見ることはない。
  • データの更新が多くあっても大丈夫。

Gatsbyの特徴

GatsbyGatsby

出典:https://www.gatsbyjs.org/

  • スタティックサイトジェネレイター。ビルドプロセスで、全てのHTML静的ページを生成し、ブラウザに渡すので、サクサクのSEOフレンドリーなサイトが構築できる。つまり、HTMLコードを生成しているのは、クライアントサイドでも、サーバーサイドでもなく、ビルドプロセス中です。
  • データの更新が多くある時には、向かない。データの更新があるたびに、静的ページを生成し直すので、サーバー側の負荷が大きくなりがち。
  • 2019年に9月に$15million(約16億円)の資金調達が完了(https://www.gatsbyjs.org/blog/2019-09-26-announcing-gatsby-15m-series-a-funding-round/)。つまり、さらなる、機能追加、コミュニテーの拡大が予想される。個人的にもかなり期待している技術。

実践での使い分けの例

LP(ランディングページ)を作成する場合

CRA

Next.js

Gatsby

パーフェクト。様々なプラグインを利用することによりAMP, PWAなどの実装も簡単。

To do  アプリ

このケースでは、SEOを考慮する必要はない、そしてデータの更新が頻繁にあるということがポイント。

CRA

  • Todosは、APIにより、ブラウザ上にフェッチされるので、ユーザーはローディングの状態を見ることになる。ベストなUXとは言えない。

Next.js

  • Todosは、HTMLとともにサーバー側でフェッチされてブラウザに渡されるので、ユーザーはローディングの状態を見ないですむ。ナイス。

Gatsby

  • データ更新の多くあるケースなので、基本的には向いていない。が、実はGatsbyにもダイナミックなサイトを作る方法があるようです。

ブログ

SEOが重要となる。また、マーケティングの人が使うかもしれないので、ブログを編集するダッシュボードをどうするかも考慮するべき。

CRA

SEOが弱いので、却下。

Next.js

SSRのため、SEO的にも、スピード的も問題ない。

Gatsby

ブログは静的なページであるので、パーフェクト。next.jsよりもさらに良いパフォーマンスを期待できる。エンジニアの間では、最近はGatsby+contentfulという組み合わせで、ブログを構築している人が増えてきまhした。

ブログを構築する際には、WordpressというメガCMSが、みなさんのファーストチョイスではないでしょうか。このブログもwordpressです。確かに、Gatsbyで作ったサイトのパフォーマンスは素晴らしいですが、広告とかのプラグインなど、現時点ではwordpressコミュニティーの方が充実している印象です。

ABOUT ME
Wata
Wata
30歳で営業職からエンジニアに転職した者のブログです。 大手海運業→総合商社→ソフトウエアエンジン。現在は、オーストラリアにてエンジニアとして働いています。 未経験からのエンジニアへの転職、フロントエンド周りの技術、エンジニアの仕事環境、趣味の旅行、JAL修行、オーストラリアの情報などを発信しています!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です