Next.jsでページが表示されるまでのこととドキュメント読む

Next.jsでは、バックエンドからデータを取ってきて、それを使用したページを表示するとき(getServerSidePropsとかですね)、
データを取ってくる前に当然といえば当然だがページの表示自体はされてしまうので、
データを入れる予定の定数だったり変数はundefinedになる。
つまり大雑把にするとこういう感じ↓
①ページを表示する(componentを読み込む→pageで構成する→表示されるの順)
②データを取ってきて格納する
③ページを表示する
なので、①の時点でundefinedの考慮がされていないと、undefinedとか言う文字列がそのまま表に出てきてしまうのだった。

こういう時は単純に、データを格納する予定の定数がundefinedだった時のdomをif文で用意すればよい
検索結果などは、よく検索が終わるまでグルグルを出していたり、
空白だったりすると思う。

どうしても待機時間は発生してしまうので、考慮が必要なのだなというメモ

これだけだと短くなってしまったのでドキュメントを読んで勉強になったことを下記に記載
nextjs.org
・ページを理解できたかの問題があるのが少しうれしい(感想)
・Next.jsでは、jsファイルとCSSファイルは自動的に縮小される
コンパイルはコードをブラウザが読み取れる状態にすること
・バンドルは依存関係を解決し、アクセス時に必要なファイル数を減らすこと(その時のアクセスで表示するページに必要なコンポーネントとか別ファイルで定義しているものを、一つのファイルにまとめることだと思う)
・コード分​​割とは、一つのアクセスに必要なファイル数を必要最低限にすることで初期アクセスにかかる負担を減らすこと
また、別アクセスで別ページに言っても、一度アクセスしたコンポーネントは再度読み込まないようにすること
・ビルド時間はアプリを動かすために必要なコードを組み立てる時間のこと
・ランタイムは実際にビルドされているアプリケーションにユーザーがアクセスし、アプリが実行される時間のこと
・Next.jsがビルドで用意するのは下記
 ①静的なHTMLファイル
 ②サーバー上でコードを組み立てるためのjsファイル
 ③CSS
 ④クライアント(ブラウザ)上でコードを組み立てるためのjsファイル