見出し画像

2023年にウェブアプリの構成を考える(Astro,Cloudflare,Supabase)

前回記事にしたのですが、日本中の温泉をデータベース化したいと考えています。

ただデータベース化するだけでは面白くないので、コアな温泉ファンが楽しんで使いたくなるような機能をたくさん妄想しています。
どんな機能を追加するかは追々記事にしたいと思っていますが、今回の本題は環境構築についてです。

昨今のウェブ界隈はまさに戦国時代で、新しいフレームワークやマイクロサービスがあわられては消えていきます。
そのため毎回新規構築のたびにどのサービスやフレームワークを使って構築するかを考える必要があります。

まだ作っていないので思案段階ではありますが、どういう構成で作るか、考えていることをアウトプットしようと思います。
大きくわけて、フロントエンドフレームワーク、バックエンド、ホスティングの3つを紹介します。

フロントエンド Astro

フロントエンドはAstroを採用しようと考えています。
決め手は普段から使っているので慣れていることと、SSRとSSGを使い分けれることです。

ウェブアプリだしSPAもいいかなーと思ったりもしたのですが、ゆくゆくメディアなどの読み物系をやるときには、SEOを考慮するとAstroは優れたものがあります。
初期はアプリをSSRで作って、ゆくゆく静的なページをSSGで追加していくということを考えています。

他に採用するか迷ったのはNext.jsとQwikです。
Next.jsはこれまで世界中で使われてきたため安心感がありますし情報量が多いです。
ですがどうにもオーバースペックな気がするし、今までReact含め触ったことがないのでやめました。

QwikはBuilder.ioが開発している最新のフレームワークです。
jsのロードを可能な限り送らせることで読み込みを高速化することができます。
ただこちらはまだリリースから日が浅いことと、やはりReactベースなのでやめました。
(というかQwikは概念が飛躍していて使いこなせる気がしない。)
気になるのは確かですがもう少し普及するのを待ちます。

そういえば最近Vue系は元気なんですかね?
Nuxtを使っていた時期もあるので頑張ってほしい気持ちはありつつも、SPAからはちょっと距離を置こうと思います。
時代はMPA回帰です。

フロントエンドに関して、おもしろい記事にいくつか出会えたので紹介しておきます。


バックエンド Supabase

ぶっちゃけ触ったことないのでどれだけ優れてるとか偉そうなことは言えないのですが、バックエンドサービス(BaaSというらしい)を調べた結果、いろいろあるもののfirebaseかsupabaseの2択で迷いました。

firebaseはNo SQLなサーバーレスサービスで、Supabaseは自ら「Supabase is an open source Firebase alternative.」と言っている、Postgres databaseベースのサービスです。

必要な機能はユーザー認証とDBなのですが、個人的にNo SQLよりSQL書けた方が分かりみが深いのでSupabaseを試してみようと思っています。
あとGoogleのサービスって基本UIとか用語がめちゃ分かりにくいので嫌いという理由もあります。

バックエンドに関しては普段触らないので詳しくありません。
試してみてまた何か記事が書けたら書きます。

ホスティング

普段はVercelを使っているのですが、今回はCloudflareを検討しています。
理由は単純で「安いから」です。
Vercelは通信量で制限が発生してくるのに対し、Cloudflare pagesは通信量の制限がありません。

SSRをベースに作ろうと考えているので、そこまでビルド回数も必要ないと思いますし、それなら無料の範囲内でいけると思われます。

本番環境をVercelやCloudflareでSSRさせたことがないので、これも試してどうかまた何かしら書けそうだったら書きます。
SSRとSSGでどのくらいpage speed insightの点数が変わるか試してみたいですね。

まとめ

フロントエンドマンなのでフロントエンドのとこだけ熱くなってしまいました。
SEOを意識する必要があるウェブアプリであれば、やはりSPAよりMPAの方がベターじゃないかと思います。
そういう意味では現行最強がAstro、期待値大がQwikでしょうか。

他には画像最適化にimageKitもしくはImageEngine、画像のホスティングにGoogle Cloud Storageなんかを考えています。

なんにせよどういう結果になるか作ってみないことには分かりませんね。
また続きを書きたいと思います。

この記事が気に入ったらサポートをしてみませんか?