公式チュートリアルでNext.jsに入門してみた (2) 〜Pre-rendering、データフェッチ〜

こんにちは、CX事業本部 IoT事業部の若槻です。

フロントエンドフレームワークNext.jsへの入門のために、次の公式チュートリアルを数回のシリーズに分けてこなしていき、基本的な機能に触れていこうと思います。

• Create a Next.js App | Learn Next.js

やってみた

本記事(2)では、チュートリアルのうち「Pre-rendering and Data Fetching」をやっていき、Next.jsのPre-renderingおよびデータフェッチについて理解を深めていきます。

• (1) 〜アプリ新規作成、ページ遷移、スタイリング編〜
  • Create a Next.js App
  • Navigate Between Pages
  • Assets, Metadata, and CSS
• (2) 〜Pre-rendering、データフェッチ編〜
  • Pre-rendering and Data Fetching
• (3) 〜Dynamic Routes、API Routes編〜
  • Dynamic Routes
  • API Routes
• (4) 〜デプロイ編〜
  • Deploying Your Next.js App

Pre-rendering and Data Fetching

Pre-rendering

デフォルトでは、Next.jsではすべてのページのPre-renderingが有効となっています。これによりNext.jsはPre-renderingにより各ページのHTMLを事前にサーバーサイドで生成するため、クライアントサイド（ブラウザ）ですべてのJavaScript実行を行うのに比べて、パフォーマンスやSEO（Search Engine Optimization）の面で有利となります。

生成されたHTMLはブラウザ上で最低限のJavaScriptを実行し、インタラクティブなページを完成させます。このプロセスをhydration（ハイドレーション）と呼びます。

Check That Pre-rendering Is Happening

Pre-renderingの動作を試してみます。

ブラウザのJavaScriptを無効にします。

Next.jsで構築されたWebサイトhttps://next-learn-starter.vercel.app/にアクセスすると、JavaScriptを実行せずにページを正常にレンダリングできています！

これはNext.jsがページコンテンツを静的なHTMLに変換しているからです。

Summary: Pre-rendering vs No Pre-rendering

下記は、Pre-rendering（Next.jsを使用）と、非Pre-rendering（Plain Reactを使用）の違いの概要についてです。

Pre-renderingでは、初回のHTMLのロードが素早く行われるためページの表示がすぐに行われます。その後<Link >などのJavaScriptの実行が必要な一部要素の処理が遅延して行われます。

一方で非Pre-renderingでは、すべてのReact ComponentがJavaScript実行を待って表示されます。

https://nextjs.org/learn/basics/data-fetching/pre-rendering

Two Forms of Pre-rendering

そしてNext.jsでは2種類のPre-rendering方式をサポートしています。

• Static Generation is the pre-rendering method that generates the HTML at build time. The pre-rendered HTML is then reused on each request.
• Server-side Rendering is the pre-rendering method that generates the HTML on each request.

1つはStatic Generation（SSG）で、これはアプリケーションのHTMLの生成が1度だけ行われ、それがページリクエストのたびに再利用されます。

もう1つはServer-side Rendering（SSR）で、こちらはページリクエストのたびにHTMLが再生成されます。

https://nextjs.org/learn/basics/data-fetching/two-forms

Per-page Basis

Next.jsでは同じアプリケーション内でページごとにPre-rendering方式の選択が可能です。そのためSSGとSSRのハイブリッドな構成のアプリケーションも実装できます。

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

Next.jsでは、パフォーマンス上の理由で基本的にはSSGの使用が推奨されています。

We recommend using Static Generation (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request.

これはページがデータを含むかどうかに関わらずです。例えば次のようなページではSSGを使用することになります。

• マーケティングページ
• ブログ一覧
• ECサイト商品一覧
• 参考ドキュメント

一方で、次のようなデータの更新が頻繁に行われるページでは、SSRを使用して表示されるデータを常に最新に保つようにします。（もしくはPre-renderingではなくclient-side JavaScriptを使用します。）

• 動画サイト（リコメンデーションされる動画がリクエストごとに頻繁に変わる）
• SNS（常に最新の投稿をトップに表示するようにする）

Static Generation with and without Data

Static Generation with Data using getStaticProps

外部データを取得する必要があるページでもStatic Generation（SSG）は利用可能です。その場合はgetStaticPropsというasync関数を使用します。

• getStaticProps (Static Generation) - Basic Features: Data Fetching | Next.js

Blog Data

それでは実際にNext.jsアプリがブログデータをフェッチする動作を実装してみます。

プロジェクトトップにpostsディレクトリを作成します。

posts配下に、次のブログコンテンツ（マークダウン）をpre-rendering.mdファイルに作成します。

posts配下に、次のブログコンテンツ（マークダウン）をssg-ssr.mdファイルに作成します。

（エディターがマークダウンを誤認識するので画像で載せています。元データはこちら）

Implement getStaticProps

マークダウンをパースするためにgray-matterをインストールします。

$ npm install gray-matter

プロジェクトトップにlibディレクトリを作成します。

lib配下に、次のファイルposts.jsを作成します。今回はここで作成するgetSortedPostsDataを外部データをフェッチするライブラリとします。

import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'

const postsDirectory = path.join(process.cwd(), 'posts')

export function getSortedPostsData() {
  // Get file names under /posts
  const fileNames = fs.readdirSync(postsDirectory)
  const allPostsData = fileNames.map(fileName => {
    // Remove ".md" from file name to get id
    const id = fileName.replace(/\.md$/, '')

    // Read markdown file as string
    const fullPath = path.join(postsDirectory, fileName)
    const fileContents = fs.readFileSync(fullPath, 'utf8')

    // Use gray-matter to parse the post metadata section
    const matterResult = matter(fileContents)

    // Combine the data with the id
    return {
      id,
      ...matterResult.data
    }
  })
  // Sort posts by date
  return allPostsData.sort(({ date: a }, { date: b }) => {
    if (a < b) {
      return 1
    } else if (a > b) {
      return -1
    } else {
      return 0
    }
  })
}

pages/index.jsを次のように更新します。getStaticPropsを使用してgetSortedPostsDataからデータをフェッチして処理しています。

import Layout from '../components/layout'
import utilStyles from '../styles/utils.module.css'
import { getSortedPostsData } from '../lib/posts'

export async function getStaticProps() {
  const allPostsData = getSortedPostsData()
  return {
    props: {
      allPostsData
    }
  }
}

export default function Home({ allPostsData }) {
  return (
    <Layout home>
      {/* Keep the existing code here */}

      {/* Add this <section> tag below the existing <section> tag */}
      <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
        <h2 className={utilStyles.headingLg}>Blog</h2>
        <ul className={utilStyles.list}>
          {allPostsData.map(({ id, date, title }) => (
            <li className={utilStyles.listItem} key={id}>
              {title}
              <br />
              {id}
              <br />
              {date}
            </li>
          ))}
        </ul>
      </section>
    </Layout>
  )
}

しかしここで開発サーバーを起動しようとすると次のエラーとなりました。nextコマンドがどこかに行ってしまったようです。

$  npm run dev

> @ dev /Users/wakatsuki.ryuta/projects/cm-rwakatsuki/nextjs-tutorial/nextjs-blog
> next dev

sh: next: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! @ dev: `next dev`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/wakatsuki.ryuta/.npm/_logs/2022-01-03T15_01_41_996Z-debug.log

本エラーは次のブログが参考になりました。

• Next.jsの開発サーバーが立ち上がらなかったとき - Qiita

どうやらgray-matterをインストールした時に何かしらの影響があったようです。npm upgradeしたら開発サーバーを正常に起動できるようになりました。

すると外部データのフェッチが行われ、Pre-renderingによりブログのインデックスが表示できました！

getStaticProps Details

Development vs. Production

今回使用したgetStaticPropsですが、development環境では（おそらくデバッグを容易にするために）リクエスト毎に実行されますが、production環境ではビルド時（HTML生成時）にのみ実行されます。

• In development (npm run dev or yarn dev), getStaticProps runs on every request.
• In production, getStaticProps runs at build time. However, this behavior can be enhanced using the fallback key returned by getStaticPaths

つまり、getStaticPropsでは原則として、リクエスト毎にクエリパラメータやHTTPヘッダーを指定して、データの動的取得は行えません。よって欲しいデータのみフィルターするなどしてデータフェッチを効率化することができないです。

Fetching Data at Request Time

Using getServerSideProps

そこでgetStaticPropsの代わりに、getServerSidePropsを使用することで、ビルド時ではなくリクエスト毎に動的なデータのフェッチが可能となります。

• getServerSideProps (Server-side Rendering) - Basic Features: Data Fetching | Next.js

これによりTime to first byte (TTFB)は若干遅くなりますが、フェッチ結果がCDNなどにキャッシュされなくなります。

今回は実装は試しませんが、覚えておくと使う機会はあるかと思います。

おわりに

公式チュートリアルでNext.jsに入門してみた (2) 〜Pre-rendering、データフェッチ編〜 でした。

次回はこちらです。

• 公式チュートリアルでNext.jsに入門してみた (3) 〜Dynamic Routes、API Routes編〜 | DevelopersIO

参考

• Next.jsのプリレンダリング方式についてまとめてみた - Qiita

以上