AppEngineでNext.js,getServerSidePropsを使ってSSRする
2022年04月07日 4:17
ISSUEでは、フロントエンドのサーバにAppEngineを使ってます。
AppEngineでgetServerSidePropsを使うことによって簡単にページをSSR化することができます。
nextからGetServerSidePropsを呼び出し、関数を定義します。
このページは /users/:id
というURLなので、context.params.id
で idを取得できます。
idを取得したらuserデータを取得します。(userRepository
は私が作ってる関数なのでご自身のやり方で行ってください)
データを取得できたら、propsで返しましょう
この処理は画面が描画される前に実行されます。
getServerSidePropsで取得したデータを受け取ります。
Userは独自に定義したtypeです。
クライアントでdisplayUserという変数に取得したユーザーデータを格納していました。
それをSSRで取得したuserデータに置き換えます。
displayUser → user
以上で完了です。
シンプルでとても簡単でした!
診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。
目次を見る