[Next.js] urql で GraphQL のデータをコンポーネント上の hook のみで SSR

Next.js の SSR は面倒くさい SSR を考えない場合、外部から取ってきた非同期データのレンダリングは、コンポーネント内に取得処理を置いて、受け取れた時点でデータを表示という流れで比較的簡単に記述できます。しかし SSR で初期 HTML に非同期データを加えようと思うと、一気に面倒になります。 何故面倒なのかと言えば、Next.js の初期レンダリングは非同期に対応していなかったからです。そのため、一般的な方法で SSR をやろうとするとgetInitialPropsやgetServerSidePropsを使って非同期データを収集し、コンポーネントにデータを引き渡す流れになります。 この構成の問題点は、クライアントで再フェッチが必要になったときに、サーバ側とクライアント側で別々に処理を書かなければならないことです。 実は可能になっていたコンポーネント側からの SSR データ作成