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

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

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

CRA(Create React App)の特徴

Create React App

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

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

Next.jsの特徴

Next.js

出典：https://nextjs.org/

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

Gatsbyの特徴

Gatsby

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

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

実践での使い分けの例

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

CRA

• もちろんページを作成することはできるが、SEOが弱いので、却下。
• プリレンダーをする方法はあるにはある。（https://coffeencoding.com/prerender-react-app-for-seo-without-ssr-or-next-js/）

Next.js

• いける。SEOにも強い。
• コンテントが静的なLPの場合は、https://nextjs.org/learn/excel/static-html-export/ を利用することで、パフォーマンス向上。

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コミュニティーの方が充実している印象です。