👉

Next.js公式チュートリアル要点抜粋 Pre-rendering and Data Fetching

2022/01/27に公開

JavaScript

What You’ll Learn in This Lesson

Next.jsのプリレンダリングの特徴
プリレンダリングの2つの方式：静的レンダリングとサーバーサイドレンダリングについて
データ付きおよびデータなしの静的レンダリング
getStaticPropsを使って外部ブログのデータをindexページにインプットする方法
getStaticPropsに関する有用な情報

Pre-rendering

デフォルトの設定でNext.jsはすべてのページをプリレンダリングする。つまりNext.jsはクライアント側のJSのレンダリングの代わりにすべてのページのHTMLを事前に生成してくれる。これにより高いパフォーマンスおよびSEOを実現できる。

Check That Pre-rendering Is Happening

JSを無効にしてもNext.jsのページが動く、プリレンダリングでJSを静的なHTMLに埋め込んでたからだ。
Reat.jsではこの機能はないため、JSを使えない環境ではページがレンダリングされない。

Two Forms of Pre-rendering

Next.jsのプリレンダリングに2つの方式がある：静的ジェネレーションとサーバーサイドレンダリング。
静的ジェネレーションはHTMLをビルド時に生成する、その後HTMLが各リクエストの間で再利用される。
サーバーサイドレンダリングはリクエストごとにHTMLを再生成する。

※ 開発モード（npm run devあるいはyarn devを実行時）下では静的ジェネレーションモードでもリクエストごとに再レンダリングする。

Per-page Basis

Next.jsはページごとにプリレンダリングの方式を決めることができる。

When to Use Static Generation v.s. Server-side Rendering

公式のお勧めは静的ジェネレーション、一回のビルドで済むし、CSNとして運用することができるからだ。サーバーで各リクエストを捌くよりは断然早くなる。
静的ジェネレーションをいろんな種類のページに適応できる。
・マーケティングページ
・ブログ投稿
・ECサイトの商品リスト
・ヘルプやドキュメンテーション
ユーザーのリクエスト前にレンダリングすべきではないページ、最新情報を表示するページやリクエストの内容で変更するページの場合はサーバーサイドレンダリングを使う。
※ クライアントサイドJSでページを変更する手もある。

Static Generation with and without Data

静的ジェネレーションはデータありとデータなしの2種類がある。
データなしの場合、静的ページがビルド時に自動的に生成される。
データあり静的ジェネレーションのケース：
・ファイルシステムにアクセスする必要がある
・外部のAPIからデータを先にfetchしないといけない
・ビルド時にデータベースにアクセスする必要がある

Static Generation with Data using getStaticProps

Next.jsではコンポーネントと同梱にgetStaticPropsという非同期（async）関数を定義することができ、この関数内でページ生成に必要なデータを取得するための処理を書く。

※ 以下ハンズオン形式の部分を省略して要点のみを記述する。

Blog Data

gray-matter：YAMLなどの構造化文字列をオブジェクト化してくれるツール。

Implement getStaticProps

getStaticPropsで取得したデータをコンポーネントで使う方法：

// ⓵ 渡したいデータをpropsオブジェクトに入れることで
export async function getStaticProps() {
  const allPostsData = getSortedPostsData()
  return {
    props: {
      allPostsData
    }
  }
}

// ⓶ コンポーネントのプロパティーとして使う
export default function Home ({ allPostsData }) { ... }

getStaticProps Details

外部APIからデータを取得する例：

export async function getSortedPostsData() {
  // Instead of the file system,
  // fetch post data from an external API endpoint
  const res = await fetch('..')
  return res.json()
}

データベースにQueryを発行する例：

import someDatabaseSDK from 'someDatabaseSDK'

const databaseClient = someDatabaseSDK.createClient(...)

export async function getSortedPostsData() {
  // Instead of the file system,
  // fetch post data from a database
  return databaseClient.query('SELECT posts...')
}

Development vs. Production

開発モード（npm run devあるいはyarn devを実行時）時、getStaticPropsがリクエストされるたびに実行する。
本番モード時はgetStaticPropsはビルド時にのみ実行される。getStaticPathsの戻り値fallbackと合わせて使うとより強化される。

※ ビルド時にしか実行されないため、リクエスト時には無効となる。つまり、クエリパラメーターやHTTPヘッダーをgetStaticPropsでは取得できない。

Only Allowed in a Page

getStaticPropsはpage単位のファイル内でしか有効にならない。ページがレンダリングされる前に必要なデータをすべて取得する必要があるのはその制限の理由の1つとなる。

What If I Need to Fetch Data at Request Time?

リクエスト時にデータをfetchしたい時はServer-side Renderingを使ってください。静的ジェネレーション自体をやめたい時はプリレンダリングをスキップ手もある。

Fetching Data at Request Time

ビルド時ではなく、リクエスト時にデータをfetchしたい場合はサーバーサイドレンダリングを使いましょう。
方法は簡単、getStaticPropsの代わりにgetServerSidePropsを使うこと。

Using getServerSideProps

基本の書き方：

export async function getServerSideProps(context) {
  return {
    props: {
      // props for your component
    }
  }
}

getServerSidePropsはリクエスト時に実行されるため、そのパラメーターcontextにリクエストのパラメーターが含まれている。

Client-side Rendering

もしデータをプリレンダリングする必要があるはない場合は、クライアントサイドレンダリングという技も使える。
外部データを必要としない部分をNext.jsで静的に生成し、ページがロードされた後、クライアント側でJavascriptを通じて外部データを取得し、残りの部分を生成する。

SWR

データのfetchしたい時はSWRを使いましょう。

Discussion