Lumos Advent Calendar 1日目🎉

横浜国立大学のテック系？サークル Lumos に所属している @tomoyahiroe です。普段は Nuxt.js などを使用した個人開発をしています。
Lumos としてアドベントカレンダー回したい！と運営の子にお願いしたところ、Goサインが出たので10人前後の人数を集めて初参加させてもらいました！

Lumos の紹介

基本誰でも入れるインカレサークルです！メンバーの興味分野はめちゃくちゃ多種多様です。Web 開発・機械学習・ゲーム開発・モバイルアプリ開発・CTF などのセキュリティ分野・競技プログラミングなど...です。唯一やってる人がいなさそうなのは組み込み系ですかね(IoTとかやってみたい)。基本パソコン使ってやることはなんでもやれるサークルです。

普段の活動では、Discord上でもくもく会やったり、雑談しながら作業したり、自分がやってることの進捗を共有したりしています。また、大学祭では LT 会を開催していました。イベントとしては、鎌倉行ったり猿島行ったり、夏はバーベキューして冬はスキー行ったりとサークルっぽいウェイウェイなアクティビティもたくさんあります。

X (旧Twitter) のアカウント名は @lumos_program です。

本編

Nuxt3 を使用していると、レンダリングモードを結構柔軟に選ぶことができます。

CSR (Client Side Rendering)
SSR (Server Side Rendering)
SSG (Static Site Generation)
Hybrid Rendering

Nuxtのレンダリングに関するドキュメント

などなど。正直、ESRとかISRとかもうレンダリング方法色々ありすぎてまだ理解できていません。
しかし、現在開発しているサイトを Firebase Hosting する際に、クライアントサイドでレンダリングしたいと思いました。

なぜクライアントサイドでレンダリングしたいのか

主に以下の理由で CSR を選びました。

開発途中の段階でもデプロイは継続的にし続けたいので、サーバに対するリクエスト回数を減らしたい(請求が怖い)
まだコンテンツがそんなにないので正直初期読み込みの遅さは問題にならない

Firebase の料金形態をまだきちんと読んでいないのですが、「サーバへのリクエストは少ないほうが安く済むだろう」というだいぶ適当な考えでリクエスト回数が少なくて済む CSR を選択しています。

Firebase のBlazeプラン(従量課金プラン)を調べたら、データ転送とストレージに対して課金されるので、リクエストごとに単一のページを返す SSG　の方がコストが抑えられそうです。
(今回は、CSRでindex.htmlを生成する方法についての記事なので許してほしい...)

Firebaseの料金プラン

CSR でエントリーポイントとして HTMLファイルを生成する

ホスティングサービスにデプロイするためにはビルドする必要があるわけですが、レンダリングモードやデプロイする環境よってビルドの方法が異なります。CSRでの方法とともにいくつか紹介します。
Nuxtのデプロイに関するドキュメント

Node.jsサーバにデプロイしたい

nuxt buildコマンドで、エントリーポイントが .output/server/index.mjsになります。

静的ホスティングしたい

nuxt.config.tsでssr:trueにして nuxt buildコマンドを実行すると、 .output/publicに静的コンテンツが生成されるはず。

Client Side Rendering したい

nuxt.config.tsでssr:falseにして、 npx nuxi generateコマンドを実行する。
nuxi generateのドキュメント

結論

nuxt.config.tsファイルで ssr: falseと設定したうえで、 nuxi generateコマンドを実行すれば、 .output/public/index.htmlが出現します。

雑談

FirebaseのCLIがめちゃくちゃ便利でした。1コマンドで　github actions のワークフローまで作成していて感動しました。 CSR でホスティングする際は、デプロイするコマンドをnuxi generateに書き換える必要がありますが、そんなもの大した手間ではなかったです。
Lumos は初年度ということもあって、毎日投稿は厳しそうですが、これからもメンバーの記事が投稿されていくと思うのでお楽しみに〜