こんにちは、ISSUEの寒河江です。
ISSUEではNext.jsを使ってCSRとSSRを分けてページを作成しています。

トップページは、CSRしています。
レビューやユーザーを毎回ロードして表示していますが、
ここは高頻度に変更を加える必要がなかったのでSSG化してみようと思います。

# 完成物

https://i-ssue.com/ にアクセスすると、すぐにページが表示されます。
若干遅れて、画像が表示されます。
以前のようにデータをロードするローディング画面は表示されせん。

![スクリーンショット 2022-04-16 17 15 05](https://user-images.githubusercontent.com/19757050/163667746-7792bba7-b863-4e78-a6c9-4389d33f45ca.png)

# GetStaticProps をインポート

型をインポートします。
![img](/mosaic-code.jpg)

# ページの表示前にデータを取得する

getStaticProps関数を用意すれば、
ビルドした時にデータを読み込んでページに渡してくれます。

![img](/mosaic-code.jpg)

# 読み込んだデータをページに渡す
型を作って、propsで渡します。
変数として受け取れば、あとはこの変数を使ってページを表示すれば完了です！

![img](/mosaic-code.jpg) 

こんにちは、ISSUEの寒河江です。
ISSUEではNext.jsを使ってCSRとSSRを分けてページを作成しています。

トップページは、CSRしています。
レビューやユーザーを毎回ロードして表示していますが、
ここは高頻度に変更を加える必要がなかったのでSSG化してみようと思います。

# 完成物

https://i-ssue.com/ にアクセスすると、すぐにページが表示されます。
若干遅れて、画像が表示されます。
以前のようにデータをロードするローディング画面は表示されせん。

![スクリーンショット 2022-04-16 17 15 05](https://user-images.githubusercontent.com/19757050/163667746-7792bba7-b863-4e78-a6c9-4389d33f45ca.png)

# GetStaticProps をインポート

型をインポートします。
```js
import { GetStaticProps } from 'next'
```

# ページの表示前にデータを取得する

getStaticProps関数を用意すれば、
ビルドした時にデータを読み込んでページに渡してくれます。

```js
export const getStaticProps: GetStaticProps<Props> = async () => {
  const reviews = await loadReviews()
  return {
    props: {
      reviews,
      users: await loadUsers(),
      reviewRelations: await loadReviewRelations(reviews),
      surveys: await loadSurveys(),
      relations: await loadRelations(),
    },
  }
}
```

# 読み込んだデータをページに渡す
型を作って、propsで渡します。
変数として受け取れば、あとはこの変数を使ってページを表示すれば完了です！

```js
type Props = {
  reviews: ReviewJson[]
  users: UserJson[]
  surveys: SurveyJson[]
  relations: RelationJson[]
  reviewRelations: RelationJson[]
}

export default function Home(props: Props) {
  const { users, reviewRelations, surveys, relations } = props
  ...
}
``` 

完成物

続きを読むには単価診断を受けてください 30秒