2020-06-02

再リニューアルしました(SSG + Serverless)

こんばんは、syakooです。このSyakoo's Labをまたもやリニューアルしました。 大きな変更点は、

  • UI
  • ロードの個数を段階的に
  • SSG+Serverless化
  • 自動デプロイを実装

という感じです。今回の一番の変更点は後半の二つ、SSG+Serverless化自動デプロイを実装ですね。それぞれを詳しく説明していきます。

SSG+Serverless化

Next.jsはビルド時にServerless化(要はページ毎に独立したファイルを出力する)することができ、今まではそれのみを使用していました。なので、記事一覧ページも記事ページもサーバーorクライアントでデータをフェッチしてレンダリングしており、UXとしてはあまりいい感じとは言えませんでした。

それの解決策を探していたところ、SSG(Static Site Generator)がありNext.jsもそれに対応しているということを知りました。SSGとは、ページをビルド時にレンダリングすることで先にHTMLファイルを生成してロードを減らすというものです。

最初はこのSSGのみを使用しようとしたのですが、これを使うと記事一覧等のページのクエリパラメータの処理に悩みました。また、記事が多くなるとデータを全部保持するのも気が引けます。なので、記事一覧はServerless、記事ページはSSGといったハイブリッドの構築を選択しました。 これができるのもNext.jsの強みだと思います。

自動デプロイ

さて、SSGを用いるとページはビルド時に生成されます。つまり、新しく記事を書いたら毎回ビルドする必要があります。流石に嫌ですよね。

ということで、自動デプロイも実装しました。といってもこのサイトをホスティングしているVercelというサービスがすごすぎて自分は何もしていません。

GitHubにプッシュ時記事を更新をトリガーとして自動デプロイするように設定しました。

全体の構成

structure

新しく個人のみが使うサイトをFirebaseでホスティングするようにして、FirebaseとVercel(Now)を使う方針は変えないまま構成しました。

おわりに

ここまで見てくださりありがとうございます。これからもちょろちょろ更新していきますのでどうぞ見ていってください。

関連タグ
myPicture
syakoo

とある企業で Web アプリ開発をしている大学院生。大学以降は符号・暗号と戦っています

目次