概要

今ホットなデジタル庁の便乗記事です

デジタル庁のホームページなのですが確かに爆速です。このサイトがSSGでレンダリングされているのかSSRでレンダリングされているのか気になって調べてみました
SSGか、SSRかの見分け方ってやつです

結果

全部のページは見ていないのですが少なくともトップページはSSGっぽいです
ぱっと見ユーザとのインタラクションがリンクしか無さそうなのでSSGかなぁとは思っていたのですが確証に変わりました🎉

解説

とりあえず似た質問の調査です

I have seen two properties related to SSG and ISR technique that are __N_SSG and isFallBack.
For SSR I have'nt seen specific properties but if __N_SSG and isFallBack were missing , there is a high chance that rendering technique is SSR

__N_SSGフラグがどうこう言っているのでここに当たりをつけて関連を調べてみますと、公式のissueで質問されていました

かいつまんで言うと、SSGでレンダリングされていることを伝えるためのプライベートなプロパティだからあってるっちゃあってるけど公開している訳じゃないし参照はしないで〜でした

今回の目的はデジタル庁がSSGかどうなのか知れればいいんでなりふり構わずこれを使います

どこのプロパティで出てくるのか実際にビルドして見てみる

実装は端折りますが、以下のようなコードを書いてSSGとSSRでビルドして実際に見てみます
Next.jsは13系です

コード

ssg.tsx

function SSGPage({ data }: any) {
  return (
    <div>
      <h1>{data}</h1>
      <Link href={"/ssr"}>to SSR</Link>
    </div>
  );
};

export async function getStaticProps() {
  const data = "SSG Page";

  return {
    props: {
      data,
    },
  };
}

export default SSGPage;

ssr.tsx

function SSRPage({ data }: any) {
  return (
    <div>
      <h1>{data}</h1>
      <Link href={"/ssg"}>to SSG</Link>
    </div>
  );
};

export async function getServerSideProps() {
  const data = "SSR Page";

  return {
    props: {
      data,
    },
  };
}

export default SSRPage;