📕

Linkタグ遷移先のページコンポーネントがSSRだった場合の通信

2023/07/05に公開

Next.js

経緯

本業の方で、Next.JS 13（App RouterはまだBeta版）を用いて開発、というか既存のレガシーな作りを取っ払ってNextにreplaceしちゃおうぜ計画を行っている。
その際に技術的に気になったことをメモしていく。できれば継続的に🐟

今回も、前回の記事から派生した疑問↓

LinkとSSR（サーバーサイドレンダリング）の共存は可能？

Linkコンポーネントはクライアントサイドでルーティングが行われるが、
ではその遷移先のpageコンポーネントでgetServerSidePropsが呼び出されていて、SSR処理ページになっていた場合は、どのような挙動になるのかが気になった。

実際に試してみる。
Linkコンポーネントを作成。

Link.tsx

const Link = () => {
 return (
  <>
   <Link href='/article'>SSRページに飛ばす</Link>
  </>
 )
};

Linkコンポーネントで呼び出す先のページでgetServerSidePropsを呼び出しておく。

.page/Article/index.tsx

const Article = (article) => {
  const data = article;
  return (
    <>
      <Article article={data} />
    </>
  );
};

export async function getServerSideProps() {
  const res = await fetch('エンドポイントURL');
  const data = await res.json();
  return { article: { data } }
}

export default Article;

結果どうなったかというと、サーバーからレスポンスを取得できていた。

公式によると、

next/linkまたはnext/routerによるクライアント側のページ遷移でこのページ（SSRページ）をリクエストすると、Next.jsはサーバーにAPIリクエストを送信し、サーバーはgetServerSidePropsを実行します。

すごい万能じゃん😳

経緯

LinkとSSR（サーバーサイドレンダリング）の共存は可能？

Discussion