Nuxt.jsとNext.jsは今のフロントを扱うフレームワークとしては二大巨頭だと思う
基本的にはNext.jsのが性能的な面では強力な機能が多いようなイメージが有るのだけど、別にそういった機能がDB系サイトだと使えないケースが多いのでNuxtでもいいなと思った
1.画像最適化が使えない
Next.jsの魅力の一つはnext/imageとかいうやつで、vercelという専用のホスティングサービスを使うと、そのnext/imageを使って表示している画像のサイズやら表示やら諸々必要なことを勝手に全部最適化してくれたりする
外部urlから取得している画像すらも最適化してくれるというのでめちゃめちゃ強い
ただしvercelの画像最適化には制限があり、確か無料プランだと月1000件まで。有料プランだと月4000件まで、更に多くの画像最適化を行いたい場合はエンタープライズ(要は応相談的なプランだと思う)になる
DB系サイトはとにかくページ数増やそうぜという方針なので、月1000件はたりなさすぎワロタという感じ
まあ本来的にもヘッダーとか共通ページで使うような画像を最適化するのに使う機能だと思うから、使う理由にはなり得ると思うは思うけど、別に共通コンポーネントに画像使うほど労力割くつもりもないのでいらないなーというのが今の感覚(共通コンポーネントに画像使った場合って、最適化は1件だけになるのか、ページ数分になるのか知らないけど)
2.コード量がNext.jsは多い
Nuxtをそこそこ使い込んでみて、基本的にはNext.jsのほうがコード量は多くなりがちだなと思った
書き心地自体はNext.jsのほうが慣れてるのもあって好きといえば好きなんだけど、ローコストで開発するんだったらNuxtかなぁと思う
3.Vuetifyが強い
Material_ui(今だとMUIなんだっけ?)を使ったこと無いのであんまりわかんないけど、Vuetify使うとかなり楽にレイアウト組める。そして割とモダンでキレイ
Chakra-uiとかtailwind-cssとか、あのへんはVuetifyに比べると自由度が高い分労力が大きい
MUI使えばNext.jsでも楽に組めそうな気配感じるけど、学習コストのことも考慮するとすでに使えるようになったVuetifyの存在は個人的に大きいなぁという感じ
4.useSWRとか強そうな機能も使わない
スゴイ雑に言うとaxiosのすごい版みたいなイメージ。
apiからデータ取得したときに、勝手に再取得してデータが常に最新状態になったり、簡単にデータ取得までのローディング画面組めたりして楽
ただSEOの兼ね合いで事前レンダリング必要だし、さらに言えば再フェッチとかの必要もないので別にいらないなぁという
---
だいたいこのへんの理由でNext.jsじゃなくてNuxt.jsでいいなとか思ってた
スケールの観点でいうと、機能面ではNext.jsのほうが強いと思っているので、最終的にベストな状態を目指すんだったらNext.jsから入ったほうがいいような気もする
ただNext.jsでUI組むの面倒くさすぎるので短期的にメリットが薄いんだったらNuxt.jsで十分な気はする
---
ちなみにDB系サイトに関してはとにかくインデックスされない問題が厳しい
厳しいのだけど、裏技使って対策した
大体5月末ぐらいにデプロイしたはずなので、ずっとインデックスなかったのに急激に増えたのがわかると思う
ひとまずこれでインデックスされない問題は解決の兆しが出た気がする
検索の方はこんな感じ
CTR低くね?とか思ったけど
自分が持ってる別サイトのデータ適当に見た限りではこんなもんな気がした
どちらかというと平均掲載順位低すぎなんだけど、まあこれは公開初期なのでしょうがない
一度とったキーワードを長期維持できるのかが大事だとは思うので、その辺考えたい
ただこれに関しては適当に作ったサイトなので企画力が弱すぎてユーザー体験をよく出来る気がしない…
というわけでその反省を生かして別サイト横展開していこうかなという考え
企画がちゃんとしてないとペルソナ絞れないので、結局全体的に構成がグダる。ペルソナ絞れれば「こういうやつはこういう情報欲しいでしょ」である程度方針作って構成作れるので強い、という話
色々種まいて、なんか咲けばいいなぐらいの気持ちでやりたいなーとか思います
追記:
いやこれとか見るとやっぱCTR低いかも
昔作ったDBサイトもこんな感じだし。
検索意図にマッチさせないと厳しいのかもなぁとか
もうちょっとクエリベースでサイトの企画を考えたほうがいいのやも。