つくる - サーバー取得化
第1章の宿題を回収する
第1章で fleama のソースを表示したとき、商品名がどこにも入っていませんでした。空の入れ物だけが返り、中身はブラウザが後から詰めていたからです。
この章で書いた形なら、そこが変わります。ページの関数がサーバーで動き、データが揃ってから HTML が組み立てられるので、返る時点で商品名が入っています。ソースを表示すると、画面に見えているのと同じ文字がそのまま並びます。
今日やること
残っている useEffect を取り除き、一覧と詳細の両方をサーバー取得にそろえます。
app/page.tsxの一覧をasyncなページにしてawait fetchで取るapp/items/[id]/page.tsxでparamsから id を取り、その商品を取る- どちらのファイルからも
useStateとuseEffectを消す
判定できることとできないこと
プレビューは本物のサーバーを持たないので、ソース表示そのものは見せられません。代わりに2つの角度から確かめます。1つは、サーバーで取った結果がそのまま画面になっていること。もう1つは、書いたコードに useEffect が残っていないことです。
この2つが揃っていれば、本物の Next.js に置いたときに初期 HTML へ中身が入ります。逆にどちらか欠けていると、見た目は同じでもソースは空のままになります。
演習
一覧と詳細をサーバー取得に移し、useEffect を完全に無くします。