AppEngineでNext.js,getServerSidePropsを使ってSSRする

0

2022年04月07日 4:17

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

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

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

propsを画面描画処理する側で受け取る

getServerSidePropsで取得したデータを受け取ります。
Userは独自に定義したtypeです。

img

クライアントで取得していたuserデータをSSRで取得しuserデータに置き換える

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

img

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

# React.js
# Next.js
0

診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。

目次を見る