【Next.js】SSRするつもりがSSGに💦ビルドエラーでハマった話

はじめに

現在、SSR で処理できる部分は SSR にしようと開発しているアプリがあります。
その過程で見事ビルド時にハマったので共有します。

訳が分からないまま解決はしたとtimes に呟いたところ、ぶべさんがコメントで挙動の違いを教えてくださり、納得できました。
大感謝！

結論

import { AddButton } from "./_components/AddButton";
import { IndexResponse } from "../_types/Malts/IndexResponse";
import { MaltItems } from "./_components/MaltItems";
import { PageLink } from "../_components/PageLink";
export default async function Malts() {
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_APP_BASE_URL}/api/malts`,
    {
      cache: "no-store", //キャッシュ無効化しないとSSGになってビルドエラー
    }
  );
  const data: IndexResponse = await response.json();

  return (
    <div className="max-w-md mx-auto py-10 px-5">
      <h2 className="text-xl">麹調味料のレシピ</h2>
      <div className="flex justify-between items-center py-3">
        <PageLink url="/recipes">レシピページ</PageLink>
        <AddButton url="/malts/new" />
      </div>
      <MaltItems maltsData={data} />
    </div>
  );
}

ポイント

cache: "no-store"

これがあるとSSR(Server Side Rendering)になります。

私はこれを書いてなくて、

const response = await fetch(
    `${process.env.NEXT_PUBLIC_APP_BASE_URL}/api/malts`,
  );

この書き方では SSG（Static Site Generation）扱いになり、ビルド時に API が利用できないためエラーになってしまいました。

SSGはビルド時に静的HTMLファイルを生成するので、ビルド時に API にアクセスしようとしても、まだ API が利用できない場合があり、エラーになることがあります。
例えば、MicroCMS などの外部 API ならすでにデプロイ済みなので問題ありませんが、私のように バックエンドとフロントエンドを同じプロジェクトでビルドしている場合、この影響を受けてしまいます。

SSRで正しく動いているコードを見に行って、第二引数あるやんって気づいて書いたら成功したので、なんでかわからんけど書かなければビルドエラーなんだなと思っていたら、ぶべさんが教えてくださってホントスッキリしました！

まとめ

• cache: "no-store" を指定すると、SSR になり、毎回リクエストをサーバーサイドで処理するため、ビルド時のエラーを回避できる。

• 指定しない場合は SSG になり、ビルド時に API がコールされるため、バックエンドを同じプロジェクト内でビルドするとエラーになる。

おわりに

もう少しで公開できそうなので、また紹介ブログ書きたいと思います。
規模は小さいですが、4回目の個人開発で初めて対象者が広いアプリを作っています。
処理速度も意識して、SSR でできるところは SSR にしようと開発していたら、思わぬところでハマりました。

おかげで新たな知識を得ることが出来たので嬉しいです！