【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓 SSR で Fetch する

Fetch で得た レスポンスデータ を使ってページ遷移までを行いました
次に、ページ遷移した後に表示するデータをバックエンド（Flask、Elasticsearch）から取得して サーバサイドレンダリング（SSR）を行います

【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓
・ログインページをデザイン
・フォーム制御
・とりあえずFetch
・FetchからRouterでページ遷移
・SSR で Fetch する　←イマココ
・Layoutつくる

SSR は、ユーザからのリクエストごとに動的にデータを取得してページが作成されます
今回でいうと、Elasticsearchからデータを取得しページに表示させることになります

Next.js で SSR するには 「getServerSideProps」 を 使います

準備

今回の最終形態はコチラ(Github)で公開しています

１．コンテナ起動

docker-compose.yml からコンテナたちを起動します

２．プログラム起動

コンテナ frontend、backend のコンテナ内で
・フロントエンドの起動
"/usr/src/next-app/uuid"

# npm run dev

・バックエンドの起動
"/usr/src/flaskr"

# python app.py

３．ブラウザアクセス

ブラウザから「http://localhost:7778/」にアクセス

４．Nutanixクラスタの IP/ユーザー/パスワード を入力してログイン

getServerSideProps の使い方

遷移先のページで 「getServerSidePropsType」作ってやることで、データ取得してからページレンダリングされます
（なのでページ表示まで時間がかかる）

以下の例では、URL の GETパラメータを Next.js コンソールに表示するようにしています

import type { GetServerSideProps, InferGetServerSidePropsType } from 'next'
type Props = InferGetServerSidePropsType<typeof getServerSideProps>

export const getServerSideProps: GetServerSideProps = async context => {
  console.log('query: ', context.query)

  /* ここに fetch などの処理 */

  return {
    props: {}
  }
}

TypeScript では 型を気にしないといけないので、いろいろつけてます

こんな URL なら

こんな 表示

SSR で Fetch

では、この GET パラメータを使って Fetch してみます
この記事のバックエンドで作ったAPI /api/latestdataset を少し改良したデータを取ってきます
※まだ return していません
フロントエンド＜pages/home.tsx＞

export const getServerSideProps: GetServerSideProps = async context => {
  //console.log('query: ', context.query)
  const keyword = context.query

  const requestOptions = {
    method: "POST",
    headers: {'Content-Type' : 'application/json'},
    body: JSON.stringify(keyword)
  }

  console.log(requestOptions)

  const fetchUrl = "http://backend:7777/api/latestdataset"
  const response = await fetch(fetchUrl, requestOptions)
  if (response.ok) {
    var res:dict = await response.json()
  } else {
    var res:dict = { 'list' : '' }
  }

  console.log(res)

  return {
    props: {}
  }
}

Next.js のコンソール

SSRでデータを表示

getServerSidePropsType を使って、取得したデータを使ってページレンダリングするには、return で変数を返してやります

  ...

  return {
    props: { res }
  }

次に受け取る側の関数で、return された同じ変数名で受け取ります

const Home: NextPage<Props> = ({res}) => {
  console.log(res)

  ....
}

export default Home

バックエンドから受け取ったデータをそのまま表示する流れがコチラ

フロントエンド：＜pages/home.tsx＞

バックエンド：＜flaskr/app.py＞

getServerSidePropsType を使ってバックエンドから取得したデータをただ表示しているだけなのでだいぶブサイクです
次回、表示を整えます

SSRは終了

これでバックエンドとのやりとりの部分は完了です
ここからは Next.js の中でどんな風に表現したいのかを考えながら、データを取り扱っていきます