🔥

Google I/O 2024で発表されたFirebase App HostingでNext.jsのSSRを試す

2024/05/18に公開

先日のGoogle I/O 2024でFirebaseの新機能が発表されました。

これを読んでいて気になったのが、App Hostingという機能です。どうやらAngularとNext.jsのSSRをサポートしてくれるようになったようです。

自分はboobyというOSSコントリビュートしやすそうなリポジトリを探せるサービスを過去にリリースしています。

これのホスティング先として最初に検討していたのがFirebase Hostingでした。が、「？SSRどうやって動かすんだ？」と思いながらデプロイのための調査をしていたところ、どうやらCloudRunなどのサーバーサイドランタイムも使いながらでなければ動かせないということに行きつきました。

これまでやってきたCSRのHostingと異なり色々と手間が増えるなという結論に至り、結果初期構築が楽なVercelにデプロイすることにしました。当時の奮闘ぶりはこちらの記事に残っていました。

過去の自分は是が非でもFirebaseを使いたかったことが読み取れるのですが(笑)

Vercelの使い心地は決して悪くなく、今でも安定稼働してくれています。

https://booby-pi.vercel.app/

しかしこの度FirebaseでもついにSSRが実現するということで、ちょうど1年くらいの時を経てFirebaseへのデプロイに再チャレンジしてみようと思います。

ソースコードやバージョン

Nest.jsは13系、Reactは18系を使っています。

https://github.com/ysknsid25/booby

どうやってSSRできているかを判断するか

SSR部分は、GitHubにリポジトリ情報をfetchしに行く際に利用しています。↓の部分がSSRでfetchして取得した結果です。

つまり、SSRが成功しているかどうかはリポジトリ情報が取得できているかどうかを見れば一目瞭然ということです。

ペラ1のアプリなのでgetServerSidePropsが少し大きいのは目を瞑ってください。

export const getServerSideProps: GetServerSideProps = async (context) => {
  const searchCondition: GitHubRepositorySearch = {
    language: 'javascript',
    sort: 'stars',
    page: 1,
    perPage: 50
  }
  let language = 'javascript'
  let sort: SortOption['value'] = 'stars'
  let page = 1
  let perPage = 50
  if (Object.keys(context.query).length > 0) {
    if (context.query.language !== '' && typeof context.query.language == 'string') {
      searchCondition.language = context.query.language
      language =
        languageOprionts.find((option) => option.value === context.query.language)?.value ??
        'javascript'
    }
    if (context.query.sort !== '' && typeof context.query.sort == 'string') {
      sort = sortOptions.find((option) => option.value === context.query.sort)?.value ?? 'stars'
      searchCondition.sort = sort
    }
    if (context.query.page !== '' && typeof context.query.page == 'string') {
      page = Number(context.query.page)
      if (isNaN(page)) {
        page = 1
      }
      searchCondition.page = page
    }
    if(context.query.per_page !== '' && typeof context.query.per_page == 'string') {
      perPage = Number(context.query.per_page)
      if (isNaN(perPage)) {
        perPage = 50
      }
      searchCondition.perPage = perPage
    }
  }
  const { repositories, totalCount } = await getRepositories(searchCondition)
  return {
    props: {
      repositories,
      totalCount,
      language,
      sort,
      page,
      perPage
    },
  }
}