Next.js: Pre-rendering, Data Fetching/ふみのて

可能な限り Static Generation を使うのがおすすめ
- 一度ページを build すれば CDN で提供できる
- リクエストごとにサーバーでページをレンダリングするよりもずっと高速
頻繁にデータが更新されたり、リクエストごとに content が変わるような page には Server-side Rendering を使う
- 速度は遅くなるが常に最新の状態

Static Generation with and without Data

Static Generation はデータの有無にかかわらずできる

外部データを取得する必要のない page: アプリが本番用に build されるときに自動的に Static Generation される
外部データを取得しないと HTML レンダリングできない page: このケースも Next.js は out of the box でサポートしている

Static Generation with Data using `getStaticProps`

外部データを取得して page の props として渡すには、 getStaticProps を使う

getStaticProps は、サーバーサイドのみで実行される
- クライアント側では実行されない
- JS のバンドルにも含まれない
getStaticProps が実行されるタイミング:
- 開発時 ( npm run dev or yarn dev): リクエストの度
- 本番時: ビルド時
ビルド時に実行されることを想定しているため、クエリパラメータや HTTPヘッダーなど、リクエスト時にのみ利用可能なデータを使用することはできない
page ファイルからのみ export できる (非 page ファイルからは export できない)
詳しくは => https://nextjs.org/docs/basic-features/data-fetching
リクエスト時にデータ取得したい場合は Static Generation は良いアイデアではない
- そういうときは、 Server-side Rendering するか pre-rendering をスキップしよう

Fetching Data at Request Time

Using `getServerSideProps`

ビルド時ではなく、リクエスト時にデータ取得が必要ならば、 Server-side Rendering してみよう

Server-side Rendering するには、 getStaticProps のかわりに getServerSideProps を page から export する

export async function getServerSideProps(context) {
  // `getServerSideProps` はリクエスト時に呼び出されるものなので、
  //  context にはリクエストパラメーターが含まれている
  return {
    props: {
      // props for your component
    }
  }
}

Time to first byte (TTFB) は getStaticProps より遅くなる
追加設定なしに CDN に生成結果をキャッシュすることはできない

Client-side Rendering

データを事前レンダリングする必要がないならば、 Client-side Rendering できます

page のうち、外部データが不要な部分は静的に生成 (事前レンダリング) して、
page ロード時に、クライアントから JavaScript で外部データを取得して、残りの部分を入れ込みます
user dashboard pages などに使うと良い

SWR

データ取得のための React hook
クライアントサイドからデータ取得するならとってもおすすめ
いろいろできるらしい
詳細はこちら => https://swr.now.sh/