ISSUEでは、フロントエンドのサーバにAppEngineを使ってます。
AppEngineでgetServerSidePropsを使うことによって簡単にページをSSR化することができます。

# SSR化したいページにgetServerSidePropsをおく
nextからGetServerSidePropsを呼び出し、関数を定義します。
このページは `/users/:id` というURLなので、`context.params.id` で idを取得できます。
idを取得したらuserデータを取得します。(`userRepository`は私が作ってる関数なのでご自身のやり方で行ってください)
データを取得できたら、propsで返しましょう
この処理は画面が描画される前に実行されます。
![img](/mosaic-code.jpg)

# propsを画面描画処理する側で受け取る
getServerSidePropsで取得したデータを受け取ります。
Userは独自に定義したtypeです。

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

# クライアントで取得していたuserデータをSSRで取得しuserデータに置き換える
クライアントでdisplayUserという変数に取得したユーザーデータを格納していました。
それをSSRで取得したuserデータに置き換えます。
displayUser → user

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

以上で完了です。
シンプルでとても簡単でした！

ISSUEでは、フロントエンドのサーバにAppEngineを使ってます。
AppEngineでgetServerSidePropsを使うことによって簡単にページをSSR化することができます。

# SSR化したいページにgetServerSidePropsをおく
nextからGetServerSidePropsを呼び出し、関数を定義します。
このページは `/users/:id` というURLなので、`context.params.id` で idを取得できます。
idを取得したらuserデータを取得します。(`userRepository`は私が作ってる関数なのでご自身のやり方で行ってください)
データを取得できたら、propsで返しましょう
この処理は画面が描画される前に実行されます。
```js
import { GetServerSideProps } from 'next'
....
export const getServerSideProps: GetServerSideProps = async (context) => {
  const { id } = context.params
  const data = await userRepository.find(id as string)
  return { props: data }
}
```

# propsを画面描画処理する側で受け取る
getServerSidePropsで取得したデータを受け取ります。
Userは独自に定義したtypeです。

```js
export type UserDetailProps = User
export default function UserDetailPage(props: UserDetailProps) {
  const user = props
}
```

# クライアントで取得していたuserデータをSSRで取得しuserデータに置き換える
クライアントでdisplayUserという変数に取得したユーザーデータを格納していました。
それをSSRで取得したuserデータに置き換えます。
displayUser → user

```js
const unsubscribe = async () => {
    if (authUser) await deleteSubscribe(displayUser.id, authUser.uid) // before
    if (authUser) await deleteSubscribe(user.id, authUser.uid)            // after
  }
```

以上で完了です。
シンプルでとても簡単でした！

SSR化したいページにgetServerSidePropsをおく

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