こんにちは！Next.jsとGatsby.jsでWebの全てを成り立たせられるとまで感じているMizutani(@sirycity)です。

今日はこのNextとGatsbyのどっちを使うか？ってなった時に簡単に決める方法についてです。というか要はSSRと静的化の比較ですね。

結論

この一言で全てが決まる。行くで。

ユーザーが開発者の知らないうちに勝手に新しいURLを作るようなWebアプリならNext、そうじゃないならGatsby。ただし最悪全てNextでいい。

Next(SSR)についての解説

ユーザーが開発者の知らないうちに勝手に新しいURLを作るとは？

例えばtwitter。ユーザーがツイートしたら新しいURLができますね！？ 当たり前だけど。

試しに僕が今ツイートしてみました。

console.log()を本番環境だとエラー扱いにするeslintの設定を時々見るんだけどどういう意図なんだろう... 見た目の問題？ console.log('テスト') みたいなのが本番で出たらかっこ悪いからとかそんな感じかな？ https://twitter.com/sirycity/status/1260757025828376577

するとほら、こんな感じで新しいURLができました。そしてこれも当たり前だけど、

ユーザーである僕は自分の意思で勝手に呟いて新しいURLを生成しました。もちろんtwitterの開発者は僕がいつ呟くかわからないし、僕以外のユーザーもです。いつ誰が何回呟くか不明。

つまりtwitterはユーザーが勝手に新しいURLを作るケースに当てはまります。したがって、もしtwitterをJSフレームワークで作るならGatsbyではなくNextが適任です。

その他のNext向きの例。

他にも有名な例だとこんなん。

• ユーザーが勝手に面白い動画を投稿するYouTube
• ユーザーが勝手に映える画像を投稿するinstagram
• ユーザーが勝手にリポジトリを作るGitHub
• ユーザーが勝手に出品するメルカリ
• ユーザーが勝手に出店する楽天市場

これらは全部作るとしたらNextです。分かりやすく言えば、ユーザーが勝手になんか登録する系です。

Gatsby(静的化)についての解説

Gatsbyは簡単。それ以外の全部のケースでGatsbyが適任です。

...といってもそれだけだと分かりづらいね。なので1つずつ例を挙げていきます。

Yahooニュース

Yahooニュースは作るとしたらGatsbyです。いくつかポイントを挙げますね。

「えっyahooは記事が勝手に増えるからNextじゃないの？」

まずYahooニュースはユーザーが記事を増やしたりはしません。それできたらやばすぎるよね。僕も勝手に記事上げてみたい。

Yahooニュースで記事を増やすのは通信者、つまり利用者ではなく開発者側が新しいURLを作っていますね。

言い換えれば、URLが勝手に増えない。まあ実際は権限を与えられた記者がノーチェックで勝手に挙げてたりしたらNextが適任になるんだけど、そういう記者は勝手に挙げるわけですからNext採用の条件に合致しますね。

あくまでも新しいページが増えていく挙動を全てコントロールできるのがGatsbyを採用する条件です。

...そしてもう一個引っかかる点がこちら。

「でもコメントはユーザーが勝手に増やすじゃん？」

その通り、コメントを書き込むタイミングは開発者が予測できませんよね。ただし、これはGatsbyで大丈夫。なぜなら、

コメントが増えてもURLができるわけじゃないからです。あくまでページのコンテンツが増えるだけですからね。

ただし、コメントでページネーションが使われていたりするとこれはもうNext案件です。そりゃそうだ新しいURL作ってるからな。

結局のところ、ブログとかメディアはよっぽど大きくならない限りはGatsbyでokです。Yahooみたいに複数の出版社とか普通抱えないしな。

一部の一人用のアプリ

一人用のアプリも基本的にはGatsbyでokです。ここわりと重要で、Nextはアプリ、Gatsbyはサイトみたいな勘違いでカテゴライズしている人がまあまあいる。

なぜかってもうお分かりよね。新しいURL作られないからよ。逆に言えば一人用でも新しいURL作られるパターンはダメ。

例えばToDoアプリが良い例だけど、ひたすらToDoを登録していってもURLは変わるわけじゃないからGatsbyで問題なし。

極端なこと言えば、twitterとかでもユーザーが世界に自分一人しかいなければGatsbyでok。

ただ、ここで「ToDoリストに好きな名前のタグを付けて、タグの名前で絞り込み検索できる」みたいな機能が付いたらNext案件。

そりゃだってユーザーがタグの名前何にするかなんて予想できないからね。

逆に極端な例だと、タグの名前が6種類くらいから選択でしか選べないとかならGatsbyでok。この場合はユーザーがタグの名前何にするか予想できるから。

...そしてアプリが複数人用ならGatsbyは無理。そりゃそうだね。これはtwitterの一人ひとりの@名前が違うのを想像してもらうと分かりやすいかも。

もしtwitter社が世界の選ばれし100人しか登録できないようにするとかだったらGatsbyでできるよ。すごい前提だね。

以上、分かりやすい？2例でした。あとは間違いやすいポイント書いていく

勘違いポイント

選定する際に間違いやすいポイント一覧。

アプリはNextじゃないとできない

前述の通り、アプリの特性によってはGatsbyでもできる。

ログインする系はNextじゃないと無理

普通にGatsbyでできるよ。

コメント欄はNextじゃないと無理

Gatsbyでできるよ。

CRUDはNextじゃないと無理

Gatsbyでできるよ

NextとGatsbyの使い分け難しいからReact手出すのやめよ

最悪全部Nextでもいいよ。Nextでも静的化できるし。

ただ、ラスター画像いっぱい使うようなコンテンツは条件に合うなら無理してでもGatsbyにした方が良い。Gatsbyのラスター画像最適化はまじで凄すぎて未来見える。

Gatsbyでは絶対に動的ページ無理

そうだよ。だけどどうっっっしてもやりたかったらURLパラメータ使って状態を表現するって方法はある。ただ見た目最悪。分かりにくい。

使い分けできるReactはVueよりイケてる

個人的にはReact派だけど vueもNuxt(SSR)とVuePress(静的化)で同じような使い分けができるよ！

結論

よっしゃ全部Nextにするか

どっちもめっちゃ使いやすいフレームワークなので使ってみて。国内ではNuxtに押されてるけど...Nuxt強い人なら学習コストは少ないと思います。以上。

ちなみにこのブログはGatsbyよ。最高。