【7章】Next.jsのチュートリアルをやってみた

これはNext.jsの公式チュートリアルの7. Fetching Data に関するメモです

前章のメモ

【6章】Next.jsのチュートリアルをやってみた

これはNext.jsの公式チュートリアルの6. Setting Up Your Database に関するメモです前章のメモ Next.jsの公式チュートリアルの該当ページ ...

Next.jsの公式チュートリアルの該当ページ
学ぶこと
データを取得する方法
1. API
2. データベースへのクエリ
ダッシュボードのUIを作りこむ
リクエストウォーターフォールとは？
複数のデータフェッチを並列で実行

Next.jsの公式チュートリアルの該当ページ

Learn Next.js: Fetching Data | Next.js

Learn about the different ways to fetch data in Next.js, and fetch data for your dashboard page using Server Components.

学ぶこと

API、ORM、SQLなどデータを取得する方法
サーバーコンポーネントでバックエンドへ安全にアクセス
リクエストウォーターフォールとは？
並列にデータを取得する方法

データを取得する方法

API

サードパーティサービスのAPIを使う
クライアントにデータベースの機密情報を公開したくない

などの場合にAPIを使用します。

Next.jsでは、Route Handlersを使用してAPIのエンドポイントを作成できる

データベースへのクエリ

APIエンドポイントを作成するため
React Server Componentsを使用してデータベースにアクセスするため
- データベースの機密情報漏洩のリスクはない

などの場合にデータベースへのクエリを使用します。

MySQLやPostgreSQLのようなRDBの場合は、PrismaなどのORMを使用してもいい。

Prismaを使ってみたい方は↓を参考にしてみてください！

【Next.js】Prismaをつかってみたい

Node.js および TypeScript のORMであるPrisma。 Next.jsでつかってみたいので、設定していきます！本記事は、Prismaに焦点を当てています。　⇒ Node.js、Docker、...

React Server Componentsを使用したデータ取得

Next.jsではデフォルトでReact Server Componentsを使用します。

Promiseをサポートしており、非同期タスクを実行できる
- useEffect, useState, ライブラリなしにasync/await が使える
データの取得や処理をサーバ上で実施し、結果のみをクライアントに返す。
直接DBにクエリを発行するため、API層がいらない

SQLを使うには

SQLのメリット

RDBにクエリを投げるときのスタンダードな言語　⇒使える人口が多い
汎用性が高く、特定のデータを取得、操作できる

今回は、Vercel Postgres SDKを使用してDBにSQLを投げます。

接続先のDBは環境変数を参照（今回だと.envファイル）

/app/lib/data.ts のように、@vercel/postgresからsql関数をインポートしてSQLを投げます。

投げるSQL文はテンプレートリテラルで記述するので変数の展開も可能。

import { sql } from '@vercel/postgres';
import {
  CustomerField,
  CustomersTableType,
  InvoiceForm,
  InvoicesTable,
  LatestInvoiceRaw,
  User,
  Revenue,
} from './definitions';
import { formatCurrency } from './utils';

export async function fetchRevenue() {
  // Add noStore() here to prevent the response from being cached.
  // This is equivalent to in fetch(..., {cache: 'no-store'}).

  try {
    // Artificially delay a response for demo purposes.
    // Don't do this in production :)

    // console.log('Fetching revenue data...');
    // await new Promise((resolve) => setTimeout(resolve, 3000));

    const data = await sql<Revenue>`SELECT * FROM revenue`;

......

import { sql } from '@vercel/postgres';

import {

CustomerField,

CustomersTableType,

InvoiceForm,

InvoicesTable,

LatestInvoiceRaw,

User,

Revenue,

} from './definitions';

import { formatCurrency } from './utils';

export async function fetchRevenue() {

// Add noStore() here to prevent the response from being cached.

// This is equivalent to in fetch(..., {cache: 'no-store'}).

try {

// Artificially delay a response for demo purposes.

// Don't do this in production :)

// console.log('Fetching revenue data...');

// await new Promise((resolve) => setTimeout(resolve, 3000));

const data = await sql<Revenue>`SELECT * FROM revenue`;

......

sql関数はサーバーコンポーネントで使用してください。
　
また、各コンポーネントでSQLを投げると収拾がつかなくなるので、
/app/lib/data.ts のようにあるコンポーネントでSQLを記載し、他のコンポーネントでインポートするのがオススメ

ダッシュボードのUIを作りこむ

DBからデータを取得する方法を学んだところでダッシュボードのUIを作っていきます

まずは↓のコードを /app/dashboard/page.tsx にコピペします

import { Card } from '@/app/ui/dashboard/cards';
import RevenueChart from '@/app/ui/dashboard/revenue-chart';
import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
import { lusitana } from '@/app/ui/fonts';
 
export default async function Page() {
  return (
    <main>
      <h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
        Dashboard
      </h1>
      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        {/* <Card title="Collected" value={totalPaidInvoices} type="collected" /> */}
        {/* <Card title="Pending" value={totalPendingInvoices} type="pending" /> */}
        {/* <Card title="Total Invoices" value={numberOfInvoices} type="invoices" /> */}
        {/* <Card
          title="Total Customers"
          value={numberOfCustomers}
          type="customers"
        /> */}
      </div>
      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
        {/* <RevenueChart revenue={revenue}  /> */}
        {/* <LatestInvoices latestInvoices={latestInvoices} /> */}
      </div>
    </main>
  );
}

import { Card } from '@/app/ui/dashboard/cards';

import RevenueChart from '@/app/ui/dashboard/revenue-chart';

import LatestInvoices from '@/app/ui/dashboard/latest-invoices';

import { lusitana } from '@/app/ui/fonts';

export default async function Page() {

return (

<main>

Dashboard

</h1>

{/* <Card title="Collected" value={totalPaidInvoices} type="collected" /> */}

{/* <Card title="Pending" value={totalPendingInvoices} type="pending" /> */}

{/* <Card title="Total Invoices" value={numberOfInvoices} type="invoices" /> */}

{/* <Card

title="Total Customers"

value={numberOfCustomers}

type="customers"

/> */}

</div>

{/* <RevenueChart revenue={revenue} /> */}

{/* <LatestInvoices latestInvoices={latestInvoices} /> */}

</div>

</main>

);

}

async fucntionとし、awaitなどを使用した非同期処理を可能にしています。
Card, RevenueChart, LatestInvoices はこの後コメントアウトを外します

データを取得してRevenueChartコンポーネントに渡す

/app/dashboard/page.tsx でRevenueChartコンポーネントに渡すrevenueを定義します。

これにはDBからとってきたrevenueのデータを入れます。

/app/lib/data.ts のfetchRevenue関数でデータを取りに行きます。

関数内のSQL文を見ると、たしかにrevenueテーブルをSELECTしてますね。

# 一部抜粋

export async function fetchRevenue() {
  // Add noStore() here to prevent the response from being cached.
  // This is equivalent to in fetch(..., {cache: 'no-store'}).

  try {
    // Artificially delay a response for demo purposes.
    // Don't do this in production :)

    // console.log('Fetching revenue data...');
    // await new Promise((resolve) => setTimeout(resolve, 3000));

    const data = await sql<Revenue>`SELECT * FROM revenue`;

    // console.log('Data fetch completed after 3 seconds.');

    return data.rows;
  } catch (error) {
    console.error('Database Error:', error);
    throw new Error('Failed to fetch revenue data.');
  }
}

# 一部抜粋

export async function fetchRevenue() {

// Add noStore() here to prevent the response from being cached.

// This is equivalent to in fetch(..., {cache: 'no-store'}).

try {

// Artificially delay a response for demo purposes.

// Don't do this in production :)

// console.log('Fetching revenue data...');

// await new Promise((resolve) => setTimeout(resolve, 3000));

const data = await sql<Revenue>`SELECT * FROM revenue`;

// console.log('Data fetch completed after 3 seconds.');

return data.rows;

} catch (error) {

console.error('Database Error:', error);

throw new Error('Failed to fetch revenue data.');

}

このfetchRevenue関数を/app/dashboard/page.tsx でimportして使っていくぅー。

RevenueChart に渡すrevenueにデータを入れたのでコメントアウトを外しておきます

import { Card } from '@/app/ui/dashboard/cards';
import RevenueChart from '@/app/ui/dashboard/revenue-chart';
import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
import { lusitana } from '@/app/ui/fonts';
import { fetchRevenue } from '@/app/lib/data';

export default async function Page() {
  const revenue = await fetchRevenue();

  return (
    <main>
      <h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
        Dashboard
      </h1>
      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        {/* <Card title="Collected" value={totalPaidInvoices} type="collected" /> */}
        {/* <Card title="Pending" value={totalPendingInvoices} type="pending" /> */}
        {/* <Card title="Total Invoices" value={numberOfInvoices} type="invoices" /> */}
        {/* <Card
          title="Total Customers"
          value={numberOfCustomers}
          type="customers"
        /> */}
      </div>
      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
        <RevenueChart revenue={revenue}  />
        {/* <LatestInvoices latestInvoices={latestInvoices} /> */}
      </div>
    </main>
  );
}

import { Card } from '@/app/ui/dashboard/cards';

import RevenueChart from '@/app/ui/dashboard/revenue-chart';

import LatestInvoices from '@/app/ui/dashboard/latest-invoices';

import { lusitana } from '@/app/ui/fonts';

import { fetchRevenue } from '@/app/lib/data';

export default async function Page() {

const revenue = await fetchRevenue();

return (

<main>

Dashboard

</h1>

{/* <Card title="Collected" value={totalPaidInvoices} type="collected" /> */}

{/* <Card title="Pending" value={totalPendingInvoices} type="pending" /> */}

{/* <Card title="Total Invoices" value={numberOfInvoices} type="invoices" /> */}

{/* <Card

title="Total Customers"

value={numberOfCustomers}

type="customers"

/> */}

</div>

{/* <LatestInvoices latestInvoices={latestInvoices} /> */}

</div>

</main>

);

}

最後に/app/ui/dashboard/revenue-chart.tsx を開きコメントアウトを外していきます

import { generateYAxis } from '@/app/lib/utils';
import { CalendarIcon } from '@heroicons/react/24/outline';
import { lusitana } from '@/app/ui/fonts';
import { Revenue } from '@/app/lib/definitions';

// This component is representational only.
// For data visualization UI, check out:
// https://www.tremor.so/
// https://www.chartjs.org/
// https://airbnb.io/visx/

export default async function RevenueChart({
  revenue,
}: {
  revenue: Revenue[];
}) {
  const chartHeight = 350;
  // NOTE: comment in this code when you get to this point in the course

  const { yAxisLabels, topLabel } = generateYAxis(revenue);

  if (!revenue || revenue.length === 0) {
    return <p className="mt-4 text-gray-400">No data available.</p>;
  }

  return (
    <div className="w-full md:col-span-4">
      <h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
        Recent Revenue
      </h2>
      {/* NOTE: comment in this code when you get to this point in the course */}

      <div className="rounded-xl bg-gray-50 p-4">
        <div className="sm:grid-cols-13 mt-0 grid grid-cols-12 items-end gap-2 rounded-md bg-white p-4 md:gap-4">
          <div
            className="mb-6 hidden flex-col justify-between text-sm text-gray-400 sm:flex"
            style={{ height: `${chartHeight}px` }}
          >
            {yAxisLabels.map((label) => (
              <p key={label}>{label}</p>
            ))}
          </div>

          {revenue.map((month) => (
            <div key={month.month} className="flex flex-col items-center gap-2">
              <div
                className="w-full rounded-md bg-blue-300"
                style={{
                  height: `${(chartHeight / topLabel) * month.revenue}px`,
                }}
              ></div>
              <p className="-rotate-90 text-sm text-gray-400 sm:rotate-0">
                {month.month}
              </p>
            </div>
          ))}
        </div>
        <div className="flex items-center pb-2 pt-6">
          <CalendarIcon className="h-5 w-5 text-gray-500" />
          <h3 className="ml-2 text-sm text-gray-500 ">Last 12 months</h3>
        </div>
      </div>
    </div>
  );
}

import { generateYAxis } from '@/app/lib/utils';

import { CalendarIcon } from '@heroicons/react/24/outline';

import { lusitana } from '@/app/ui/fonts';

import { Revenue } from '@/app/lib/definitions';

// This component is representational only.

// For data visualization UI, check out:

// https://www.tremor.so/

// https://www.chartjs.org/

// https://airbnb.io/visx/

export default async function RevenueChart({

revenue,

}: {

revenue: Revenue[];

}) {

const chartHeight = 350;

// NOTE: comment in this code when you get to this point in the course

const { yAxisLabels, topLabel } = generateYAxis(revenue);

if (!revenue || revenue.length === 0) {

return <p className="mt-4 text-gray-400">No data available.</p>;

}

return (

Recent Revenue

</h2>

{/* NOTE: comment in this code when you get to this point in the course */}

<div

className="mb-6 hidden flex-col justify-between text-sm text-gray-400 sm:flex"

style={{ height: `${chartHeight}px` }}

{yAxisLabels.map((label) => (

<p key={label}>{label}</p>

))}

</div>

{revenue.map((month) => (

<div

className="w-full rounded-md bg-blue-300"

style={{

height: `${(chartHeight / topLabel) * month.revenue}px`,

}}

></div>

{month.month}

</p>

</div>

))}

</div>

<h3 className="ml-2 text-sm text-gray-500 ">Last 12 months</h3>

</div>

);

}

準備完了なので、ローカルサーバを起動してブラウザからアクセスします

// ローカルサーバー起動
$ npm run dev

// /app/dashboard/page.tsx を見たいので
// http://localhost:3000/dashboard   にアクセス！

// ローカルサーバー起動

$ npm run dev

// /app/dashboard/page.tsx を見たいので

// http://localhost:3000/dashboard にアクセス！

↓の感じで棒グラフが出現すればOK！

データを取得してLatestInvoicesコンポーネントに渡す

お次は、LatestInvoicesコンポーネントにデータを渡していきます。

先ほどと同じように/app/lib/data.ts でデータを取得するfetchLatestInvoices関数が定義。

こちらは、JOINやらORDER BY やら LIMIT使ってますねー

// 一部抜粋

export async function fetchLatestInvoices() {
  try {
    const data = await sql<LatestInvoiceRaw>`
      SELECT invoices.amount, customers.name, customers.image_url, customers.email, invoices.id
      FROM invoices
      JOIN customers ON invoices.customer_id = customers.id
      ORDER BY invoices.date DESC
      LIMIT 5`;

    const latestInvoices = data.rows.map((invoice) => ({
      ...invoice,
      amount: formatCurrency(invoice.amount),
    }));
    return latestInvoices;
  } catch (error) {
    console.error('Database Error:', error);
    throw new Error('Failed to fetch the latest invoices.');
  }
}

// 一部抜粋

export async function fetchLatestInvoices() {

try {

const data = await sql<LatestInvoiceRaw>`

SELECT invoices.amount, customers.name, customers.image_url, customers.email, invoices.id

FROM invoices

JOIN customers ON invoices.customer_id = customers.id

ORDER BY invoices.date DESC

LIMIT 5`;

const latestInvoices = data.rows.map((invoice) => ({

...invoice,

amount: formatCurrency(invoice.amount),

}));

return latestInvoices;

} catch (error) {

console.error('Database Error:', error);

throw new Error('Failed to fetch the latest invoices.');

}

このfetchLatestInvoices関数を/app/dashboard/page.tsx でimportして、

LatestInvoices に渡すlatestInvoicesにデータを入れたのでコメントアウトを外しておきます

import { Card } from '@/app/ui/dashboard/cards';
import RevenueChart from '@/app/ui/dashboard/revenue-chart';
import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
import { lusitana } from '@/app/ui/fonts';
import { fetchRevenue, fetchLatestInvoices } from '@/app/lib/data';

export default async function Page() {
  const revenue = await fetchRevenue();
  const latestInvoices = await fetchLatestInvoices();

  return (
    <main>
      <h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
        Dashboard
      </h1>
      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        {/* <Card title="Collected" value={totalPaidInvoices} type="collected" /> */}
        {/* <Card title="Pending" value={totalPendingInvoices} type="pending" /> */}
        {/* <Card title="Total Invoices" value={numberOfInvoices} type="invoices" /> */}
        {/* <Card
          title="Total Customers"
          value={numberOfCustomers}
          type="customers"
        /> */}
      </div>
      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
        <RevenueChart revenue={revenue}  />
        <LatestInvoices latestInvoices={latestInvoices} />
      </div>
    </main>
  );
}

import { Card } from '@/app/ui/dashboard/cards';

import RevenueChart from '@/app/ui/dashboard/revenue-chart';

import LatestInvoices from '@/app/ui/dashboard/latest-invoices';

import { lusitana } from '@/app/ui/fonts';

import { fetchRevenue, fetchLatestInvoices } from '@/app/lib/data';

export default async function Page() {

const revenue = await fetchRevenue();

const latestInvoices = await fetchLatestInvoices();

return (

<main>

Dashboard

</h1>

{/* <Card title="Collected" value={totalPaidInvoices} type="collected" /> */}

{/* <Card title="Pending" value={totalPendingInvoices} type="pending" /> */}

{/* <Card title="Total Invoices" value={numberOfInvoices} type="invoices" /> */}

{/* <Card

title="Total Customers"

value={numberOfCustomers}

type="customers"

/> */}

</div>

</div>

</main>

);

}

最後に/app/ui/dashboard/latest-invoices.tsx を開き、19,56行目のコメントアウトを外します

再度ローカルサーバーを起動して、先ほどと同じURLにアクセスしてみます

棒グラフの右側に、↓のように５人の情報が表示されればOK！

データを取得してCardコンポーネントに渡す

最後はCardコンポーネント。流れは今までと一緒。

ただ、必要なデータが1つではなく4つになります。

具体的には、

支払われた請求の合計金額
まだ支払われていない請求の合計金額
請求の総数
顧客の総数

例によって、/app/lib/data.ts にあるfetchCardData関数をつかいます。

総数を求めるCOUNTだったり、合計するSUM、フィルターするWHENなどを使ってます

// 一部抜粋

export async function fetchCardData() {
  try {
    // You can probably combine these into a single SQL query
    // However, we are intentionally splitting them to demonstrate
    // how to initialize multiple queries in parallel with JS.
    const invoiceCountPromise = sql`SELECT COUNT(*) FROM invoices`;
    const customerCountPromise = sql`SELECT COUNT(*) FROM customers`;
    const invoiceStatusPromise = sql`SELECT
         SUM(CASE WHEN status = 'paid' THEN amount ELSE 0 END) AS "paid",
         SUM(CASE WHEN status = 'pending' THEN amount ELSE 0 END) AS "pending"
         FROM invoices`;

    const data = await Promise.all([
      invoiceCountPromise,
      customerCountPromise,
      invoiceStatusPromise,
    ]);

    const numberOfInvoices = Number(data[0].rows[0].count ?? '0');
    const numberOfCustomers = Number(data[1].rows[0].count ?? '0');
    const totalPaidInvoices = formatCurrency(data[2].rows[0].paid ?? '0');
    const totalPendingInvoices = formatCurrency(data[2].rows[0].pending ?? '0');

    return {
      numberOfCustomers,
      numberOfInvoices,
      totalPaidInvoices,
      totalPendingInvoices,
    };
  } catch (error) {
    console.error('Database Error:', error);
    throw new Error('Failed to fetch card data.');
  }
}

// 一部抜粋

export async function fetchCardData() {

try {

// You can probably combine these into a single SQL query

// However, we are intentionally splitting them to demonstrate

// how to initialize multiple queries in parallel with JS.

const invoiceCountPromise = sql`SELECT COUNT(*) FROM invoices`;

const customerCountPromise = sql`SELECT COUNT(*) FROM customers`;

const invoiceStatusPromise = sql`SELECT

SUM(CASE WHEN status = 'paid' THEN amount ELSE 0 END) AS "paid",

SUM(CASE WHEN status = 'pending' THEN amount ELSE 0 END) AS "pending"

FROM invoices`;

const data = await Promise.all([

invoiceCountPromise,

customerCountPromise,

invoiceStatusPromise,

]);

const numberOfInvoices = Number(data[0].rows[0].count ?? '0');

const numberOfCustomers = Number(data[1].rows[0].count ?? '0');

const totalPaidInvoices = formatCurrency(data[2].rows[0].paid ?? '0');

const totalPendingInvoices = formatCurrency(data[2].rows[0].pending ?? '0');

return {

numberOfCustomers,

numberOfInvoices,

totalPaidInvoices,

totalPendingInvoices,

};

} catch (error) {

console.error('Database Error:', error);

throw new Error('Failed to fetch card data.');

}

また、↑の21-24行目でSQLの実行結果を使いやすいフォーマットに変えています。

formatCurrency関数は/app/lib/data.ts にあり、USD表記の文字列に変換。

100で割っているのは、DBに格納されているセントをドルに変換するためです。

// 一部抜粋

export const formatCurrency = (amount: number) => {
  return (amount / 100).toLocaleString('en-US', {
    style: 'currency',
    currency: 'USD',
  });
};

// 一部抜粋

export const formatCurrency = (amount: number) => {

return (amount / 100).toLocaleString('en-US', {

style: 'currency',

currency: 'USD',

});

};

このfetchLatestInvoices関数を/app/dashboard/page.tsx でimportして、

Card に渡すデータを分割代入で変数に入れたのでコメントアウトを外しておきます

import { Card } from '@/app/ui/dashboard/cards';
import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
import RevenueChart from '@/app/ui/dashboard/revenue-chart';
import { lusitana } from '@/app/ui/fonts';
import { fetchCardData, fetchLatestInvoices, fetchRevenue } from '@/app/lib/data';

export default async function Page() {
  const revenue = await fetchRevenue();
  const latestInvoices = await fetchLatestInvoices();
  const {
    numberOfCustomers,
    numberOfInvoices,
    totalPaidInvoices,
    totalPendingInvoices,
  } = await fetchCardData();

  return (
    <main>
      <h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
        Dashboard
      </h1>
      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        <Card title="Collected" value={totalPaidInvoices} type="collected" />
        <Card title="Pending" value={totalPendingInvoices} type="pending" />
        <Card title="Total Invoices" value={numberOfInvoices} type="invoices" />
        <Card
          title="Total Customers"
          value={numberOfCustomers}
          type="customers"
        />
      </div>
      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
        <RevenueChart revenue={revenue} />
        <LatestInvoices latestInvoices={latestInvoices} />
      </div>
    </main>
  );
}

import { Card } from '@/app/ui/dashboard/cards';

import LatestInvoices from '@/app/ui/dashboard/latest-invoices';

import RevenueChart from '@/app/ui/dashboard/revenue-chart';

import { lusitana } from '@/app/ui/fonts';

import { fetchCardData, fetchLatestInvoices, fetchRevenue } from '@/app/lib/data';

export default async function Page() {

const revenue = await fetchRevenue();

const latestInvoices = await fetchLatestInvoices();

const {

numberOfCustomers,

numberOfInvoices,

totalPaidInvoices,

totalPendingInvoices,

} = await fetchCardData();

return (

<main>

Dashboard

</h1>

<Card

title="Total Customers"

value={numberOfCustomers}

type="customers"

</div>

</div>

</main>

);

}

再度ローカルサーバーを起動して、先ほどと同じURLにアクセスしてみます

棒グラフの上に、↓のように4つの数字が表示されればOK！

データを取得する際の注意点

リクエストウォーターフォールによるパフォーマンスの低下
静的レンダリングによる最新情報の未反映（次章で詳細を見ていく）

リクエストウォーターフォールとは？

複数のリクエストを順番に処理していくこと。

前のリクエストが完了してから、次のリクエストを開始する。

今回のコードだと

fetchRevenue()
fetchLatestInvoices()
fetchCardData()

の順にリクエストしていく。

// 一部抜粋

export default async function Page() {
  const revenue = await fetchRevenue();
  const latestInvoices = await fetchLatestInvoices();
  const {
    numberOfCustomers,
    numberOfInvoices,
    totalPaidInvoices,
    totalPendingInvoices,
  } = await fetchCardData();

// 一部抜粋

export default async function Page() {

const revenue = await fetchRevenue();

const latestInvoices = await fetchLatestInvoices();

const {

numberOfCustomers,

numberOfInvoices,

totalPaidInvoices,

totalPendingInvoices,

} = await fetchCardData();

初めにユーザ情報を取得しその情報を使って次のリクエストをするときなど
リクエストする順番がある場合には有効

先ほどのコードで例えば各リクエストに3秒ずつかかるとすると、
3req × 3seq で計9seqかかるため、パフォーマンス低下の可能性あり

複数のデータフェッチを並列で実行

リクエストウォーターフォールへの一般的な対応法はリクエストを並列に行うこと。

JavaScriptでは、Promise.all() もしくは Promise.allSettled() を使います。

Promise.all()：1つでも処理が失敗した瞬間に終了してしまう
Promise.allSettled()：処理の成否にかかわらずすべて実行。

同時にリクエストを処理できるのでパフォーマンスが向上する。
ライブラリやフレームワーク固有でなく、JavaScriptの文法で書ける

処理が重いリクエストが1つでもあると、その処理時間に影響を受ける

今回のアプリケーションだと、/app/lib/data.ts の fetchCardData関数で使われてます

// 一部抜粋

export async function fetchCardData() {
  try {
    const invoiceCountPromise = sql`SELECT COUNT(*) FROM invoices`;
    const customerCountPromise = sql`SELECT COUNT(*) FROM customers`;
    const invoiceStatusPromise = sql`SELECT
         SUM(CASE WHEN status = 'paid' THEN amount ELSE 0 END) AS "paid",
         SUM(CASE WHEN status = 'pending' THEN amount ELSE 0 END) AS "pending"
         FROM invoices`;
 
    const data = await Promise.all([
      invoiceCountPromise,
      customerCountPromise,
      invoiceStatusPromise,
    ]);
    // ...
  }
}