Web開発の技術スタックについて
前置き
色々作ってみて感じたことをまとめておきたいと思ったので。フロント中心。
更新していくかもしれない。
配信形式
SPA
ビルドしたhtmlと大きなjsだけ渡せば良いので配信が楽。その分最初に渡すファイルが大きく、FCPも大きくなりSEOで不利らしいが個人開発でそれを気にするようなものを作ったことがないので気になっていない。
ただ、OGPが1サイト1つ決め打ちになってしまうのは痛い。
SSG
Next.jsはReactとほぼ同じ感覚で使えるのが良いし、vercelで無料でデプロイできて強い。
このブログはSSGでLighthouseのスコアを意識して作っているが、そもそもGoogle検索に個々のページが引っかからず、なにかもっと初歩的なところを見直したほうが良い。
話は逸れたが、個人開発でやる分にはReactを使うなら部分部分SSGであらかじめビルドしておいても損はないと思う。
ただ、Three.jsを使う際にWebGL周りで色々引っかかったし、未だに理解できていない部分が多い。WebGLとSSG双方への理解が足りていない。自分の勉強不足のせい。
SSR
仮想DOMフレームワークに飼いならされてしまっているため触る気が起きない。
フロントエンドフレームワーク
Vue
JavaScriptが苦手な人向けという印象。
React
全部JavaScriptとして書けるのが良い。人口も多い。ライブラリも充実している。TypeScriptと相性が良い。好き。
インフラ
Amplify
一応Next.jsプロジェクトもデプロイできるらしい。
post-processing周りでvercelと挙動の違いがあったためVercelに心が移ってしまったが、そういうGPUを使うページをビルドしないのであれば良いのでは。
Vercel
Next使うならこれ一択。個人無料はありがたいが、チーム開発になった瞬間値段跳ね上がるのちょっと。中間が欲しい。
Lambda的なサーバレス関数も設置できるらしいけど、DBは別で用意する必要があるのであんまり…。
Firebase
認証、ストレージが無料なのはすごい。CloudFunctionsも安い。
Nextが使えないから、Reactと合わせるかホスティングだけVercelに持ってくのが良さげ。