Next.jsのGetServerSidePropsの挙動について

2022/02/11 2022/02/11

Next.jsのGetServerSidePropsの挙動について

こんにちは。のんです。

Reactは書いたことあるのですが、Next.jsは触ったこと無かったので入門しました。
今回はそこで発見したわかりにくい仕様について備忘録ついでに記事にしたいと思います。

メモ程度で終わってしまいますがご了承ください。

Next.jsのSSGとSSR。前置き。

Next.jsはPreRenderingとServerSideRenderingの2つをサポートしています。

クローラーBotのことなどを考えると、SSR一択かもしれんな。と公式からの回答もあるようにSSR推奨気味ではあるものの、それをどのように動作確認すれば良いものやら試行錯誤していました。

自分的には右クリックからでる「ページのソースを確認」でHTMLの内容が表示されていればSSRできていると考えています。

デフォルトの設定だとSSRできていないようで、どこで切り替えられるのかと調査していました。
Nuxt.jsとは違い設定にSSRモードのフラグ管理も無いようなので、発見時にはなるほど〜といった感想です。

GetServerSidePropsの挙動について

結論としてはGetServerSidePropsの関数をexportしてやる必要がありました。

SSRの処理がない場合でも宣言することでSSRできるようになります。

ここが重要なようで、別段SSR時に特別なfetch処理がない場合でもこいつを宣言することでSSRが可能になるようです。

こんな感じ。（省略とかしてない本当のコード）

copied.import {GetServerSideProps, NextPage} from "next";
import {useRouter} from "next/router";

const Article: NextPage = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <p>articles</p>
      <p>{id}</p>
    </div>
  );
};

export const getServerSideProps: GetServerSideProps = async (context) => {
  return {
    props: {},
  };
};

export default Article;

このgetServerSidePropsの部分。

処理もしていないし、propsも渡していませんが、このページをSSRするために宣言しています。

いや、そんなことする必要あるの？という話ですが、jsでレンダリングされる以上クローラーに検知され易くするためには必要な処置だと考えています。

具体的な例を書くとこのようになります。

copied.import {GetServerSideProps, NextPage} from "next";
import {useRouter} from "next/router";

const Article: NextPage = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <p>articles</p>
      <p>{id}</p>
    </div>
  );
};

// SSRされないようにコメントアウト
// export const getServerSideProps: GetServerSideProps = async (context) => {
//   return {
//     props: {},
//   };
// };

export default Article;

とすると、

copied.const router = useRouter();
const { id } = router.query;

で取得した

copied.<p>{id}</p>

の部分がSSRされません。

このコメントアウトをもとに戻すと......SSRされます。

これは

copied.const router = useRouter();
const { id } = router.query;

がjsの処理であり、PreRenderingされているためソースレベルではhtmlとして出力されていないからだと考えます。

なので、全てをしっかりクローラーに判断してもらうためには、何も処理がなくてもいいので

copied.export const getServerSideProps: GetServerSideProps = async (context) => {
  return {
    props: {},
  };
};

を書いておこうということを発見しました。

最後に

正直、普段触っている方からしたら「何を今更。」という話かもしれませんが、Nuxt.jsユーザーからすると結構珍しいことだったのでメモ程度に記事にさせていただきました。

この「のんラボ」もそろそろ一新するタイミングかなぁ〜と考えています。そのときにはNext.jsを使って一新したいです。

あと、技術記事にするときに「わからなかったこと」や「わかりにくいこと」を中心に記事にしてきましたが、ブログのネタに困ることが多くなってきたので、垂れ流し形式変更しようかなと思い始めています。

まぁこのへんはゆるく考えます。

また記事を書きますので、その時はよしなに。