Next.js 零基础教程 10 流媒体技术实现

上回说到我们使用静态渲染的方法，会导致页面加载慢的问题，这节我们来讲一下当数据请求缓慢的时候，如何改善用户体验。

在本节中，我们将会讨论：

• 什么是流媒体以及何时可以使用它。

• 如何使用loading.tsx Suspense 实现流式传输。

• 什么是加载骨架。

• 什么是路线组，以及何时可以使用它们。

• 在您的应用程序中，Suspense 边界应放在哪里。

什么是流媒体

流式传输是一种数据传输技术，允许您将路由分解为更小的“块”，并在它们准备就绪时逐步将它们从服务器流式传输到客户端。

通过流式传输，您可以防止缓慢的数据请求阻塞整个页面。这样一来，用户就可以查看页面的各个部分并与之交互，而无需等待所有数据加载完毕后才能向用户显示任何 UI。

流式传输与 React 的组件模型配合得很好，因为每个组件都可以看作一个块。
有两种方法可以在 Next.js 中实现流式传输：

1. 在页面级别，使用loading.tsx文件。

2. 对于特定组件，使用<Suspense>。

接下来，我们看看这是如何工作的

使用流式传输整个页面 loading.tsx

在该/app/dashboard文件夹中，创建一个名为loading.tsx：

export default function Loading() {
  return <div>Loading...</div>;
}

这里发生了一些事情：

1. loading.tsx是一个基于 Suspense 构建的特殊 Next.js 文件，它允许您创建后备 UI，以在页面内容加载时替代显示。

2. 由于<SideNav>是静态的，所以会立即显示。用户可以<SideNav>在动态内容加载时进行交互。

3. 用户不必等待页面加载完毕即可离开（这称为可中断导航）。

恭喜！您刚刚实现了流式传输。但我们可以做更多来改善用户体验。让我们显示加载骨架而不是Loading…文本。

添加加载骨架

加载骨架是 UI 的简化版本。许多网站将其用作占位符（或后备），以向用户指示内容正在加载。您添加的任何 UI 都loading.tsx将作为静态文件的一部分嵌入，并首先发送。然后，其余动态内容将从服务器流式传输到客户端。

创建UI骨架文件 /app/ui/skeletons.tsx

// Loading animation
const shimmer =
  'before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/60 before:to-transparent';

export function CardSkeleton() {
  return (
    <div
      className={`${shimmer} relative overflow-hidden rounded-xl bg-gray-100 p-2 shadow-sm`}
    >
      <div className="flex p-4">
        <div className="h-5 w-5 rounded-md bg-gray-200" />
        <div className="ml-2 h-6 w-16 rounded-md bg-gray-200 text-sm font-medium" />
      </div>
      <div className="flex items-center justify-center truncate rounded-xl bg-white px-4 py-8">
        <div className="h-7 w-20 rounded-md bg-gray-200" />
      </div>
    </div>
  );
}

export function CardsSkeleton() {
  return (
    <>
      <CardSkeleton />
      <CardSkeleton />
      <CardSkeleton />
      <CardSkeleton />
    </>
  );
}

export function RevenueChartSkeleton() {
  return (
    <div className={`${shimmer} relative w-full overflow-hidden md:col-span-4`}>
      <div className="mb-4 h-8 w-36 rounded-md bg-gray-100" />
      <div className="rounded-xl bg-gray-100 p-4">
        <div className="mt-0 grid h-[410px] grid-cols-12 items-end gap-2 rounded-md bg-white p-4 sm:grid-cols-13 md:gap-4" />
        <div className="flex items-center pb-2 pt-6">
          <div className="h-5 w-5 rounded-full bg-gray-200" />
          <div className="ml-2 h-4 w-20 rounded-md bg-gray-200" />
        </div>
      </div>
    </div>
  );
}

export function InvoiceSkeleton() {
  return (
    <div className="flex flex-row items-center justify-between border-b border-gray-100 py-4">
      <div className="flex items-center">
        <div className="mr-2 h-8 w-8 rounded-full bg-gray-200" />
        <div className="min-w-0">
          <div className="h-5 w-40 rounded-md bg-gray-200" />
          <div className="mt-2 h-4 w-12 rounded-md bg-gray-200" />
        </div>
      </div>
      <div className="mt-2 h-4 w-12 rounded-md bg-gray-200" />
    </div>
  );
}

export function LatestInvoicesSkeleton() {
  return (
    <div
      className={`${shimmer} relative flex w-full flex-col overflow-hidden md:col-span-4`}
    >
      <div className="mb-4 h-8 w-36 rounded-md bg-gray-100" />
      <div className="flex grow flex-col justify-between rounded-xl bg-gray-100 p-4">
        <div className="bg-white px-6">
          <InvoiceSkeleton />
          <InvoiceSkeleton />
          <InvoiceSkeleton />
          <InvoiceSkeleton />
          <InvoiceSkeleton />
        </div>
        <div className="flex items-center pb-2 pt-6">
          <div className="h-5 w-5 rounded-full bg-gray-200" />
          <div className="ml-2 h-4 w-20 rounded-md bg-gray-200" />
        </div>
      </div>
    </div>
  );
}

export default function DashboardSkeleton() {
  return (
    <>
      <div
        className={`${shimmer} relative mb-4 h-8 w-36 overflow-hidden rounded-md bg-gray-100`}
      />
      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        <CardSkeleton />
        <CardSkeleton />
        <CardSkeleton />
        <CardSkeleton />
      </div>
      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
        <RevenueChartSkeleton />
        <LatestInvoicesSkeleton />
      </div>
    </>
  );
}

export function TableRowSkeleton() {
  return (
    <tr className="w-full border-b border-gray-100 last-of-type:border-none [&:first-child>td:first-child]:rounded-tl-lg [&:first-child>td:last-child]:rounded-tr-lg [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg">
      {/* Customer Name and Image */}
      <td className="relative overflow-hidden whitespace-nowrap py-3 pl-6 pr-3">
        <div className="flex items-center gap-3">
          <div className="h-8 w-8 rounded-full bg-gray-100"></div>
          <div className="h-6 w-24 rounded bg-gray-100"></div>
        </div>
      </td>
      {/* Email */}
      <td className="whitespace-nowrap px-3 py-3">
        <div className="h-6 w-32 rounded bg-gray-100"></div>
      </td>
      {/* Amount */}
      <td className="whitespace-nowrap px-3 py-3">
        <div className="h-6 w-16 rounded bg-gray-100"></div>
      </td>
      {/* Date */}
      <td className="whitespace-nowrap px-3 py-3">
        <div className="h-6 w-16 rounded bg-gray-100"></div>
      </td>
      {/* Status */}
      <td className="whitespace-nowrap px-3 py-3">
        <div className="h-6 w-16 rounded bg-gray-100"></div>
      </td>
      {/* Actions */}
      <td className="whitespace-nowrap py-3 pl-6 pr-3">
        <div className="flex justify-end gap-3">
          <div className="h-[38px] w-[38px] rounded bg-gray-100"></div>
          <div className="h-[38px] w-[38px] rounded bg-gray-100"></div>
        </div>
      </td>
    </tr>
  );
}

export function InvoicesMobileSkeleton() {
  return (
    <div className="mb-2 w-full rounded-md bg-white p-4">
      <div className="flex items-center justify-between border-b border-gray-100 pb-8">
        <div className="flex items-center">
          <div className="mr-2 h-8 w-8 rounded-full bg-gray-100"></div>
          <div className="h-6 w-16 rounded bg-gray-100"></div>
        </div>
        <div className="h-6 w-16 rounded bg-gray-100"></div>
      </div>
      <div className="flex w-full items-center justify-between pt-4">
        <div>
          <div className="h-6 w-16 rounded bg-gray-100"></div>
          <div className="mt-2 h-6 w-24 rounded bg-gray-100"></div>
        </div>
        <div className="flex justify-end gap-2">
          <div className="h-10 w-10 rounded bg-gray-100"></div>
          <div className="h-10 w-10 rounded bg-gray-100"></div>
        </div>
      </div>
    </div>
  );
}

export function InvoicesTableSkeleton() {
  return (
    <div className="mt-6 flow-root">
      <div className="inline-block min-w-full align-middle">
        <div className="rounded-lg bg-gray-50 p-2 md:pt-0">
          <div className="md:hidden">
            <InvoicesMobileSkeleton />
            <InvoicesMobileSkeleton />
            <InvoicesMobileSkeleton />
            <InvoicesMobileSkeleton />
            <InvoicesMobileSkeleton />
            <InvoicesMobileSkeleton />
          </div>
          <table className="hidden min-w-full text-gray-900 md:table">
            <thead className="rounded-lg text-left text-sm font-normal">
              <tr>
                <th scope="col" className="px-4 py-5 font-medium sm:pl-6">
                  Customer
                </th>
                <th scope="col" className="px-3 py-5 font-medium">
                  Email
                </th>
                <th scope="col" className="px-3 py-5 font-medium">
                  Amount
                </th>
                <th scope="col" className="px-3 py-5 font-medium">
                  Date
                </th>
                <th scope="col" className="px-3 py-5 font-medium">
                  Status
                </th>
                <th
                  scope="col"
                  className="relative pb-4 pl-3 pr-6 pt-2 sm:pr-6"
                >
                  <span className="sr-only">Edit</span>
                </th>
              </tr>
            </thead>
            <tbody className="bg-white">
              <TableRowSkeleton />
              <TableRowSkeleton />
              <TableRowSkeleton />
              <TableRowSkeleton />
              <TableRowSkeleton />
              <TableRowSkeleton />
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

修复路由组加载骨架错误

现在，您的加载框架也将应用于发票和客户页面。由于在文件系统中loading.tsx级别高于/invoices/page.tsx和/customers/page.tsx，因此它也适用于这些页面。
我们可以用路由组来改变这种情况/(overview)。在仪表板文件夹中创建一个名为的新文件夹。然后，将您的loading.tsx和page.tsx文件移动到文件夹内：

在这里，您使用路由组来确保loading.tsx仅适用于仪表板概览页面。但是，您也可以使用路由组将应用程序分成几个部分（例如(marketing)路线和(shop)路线），或按团队划分较大的应用程序。

流式传输组件

到目前为止，您已流式传输整个页面。但您也可以更细粒度地使用 React Suspense流式传输特定组件。

Suspense 允许您推迟渲染应用程序的某些部分，直到满足某些条件（例如，数据已加载）。您可以将动态组件包装在 Suspense 中。然后，在动态组件加载时向其传递一个后备组件以进行显示。

如果您还记得缓慢的数据请求，fetchRevenue()那么这就是拖慢整个页面速度的请求。您可以使用 Suspense 仅传输此组件并立即显示页面其余的UI，而不是阻塞整个页面。为此，您需要将数据提取移至组件，让我们更新代码以查看其外观：

添加Suspense 模块

import { Suspense } from 'react';
import { RevenueChartSkeleton } from '@/app/ui/skeletons';

修改/app/(overview)/page.tsx引用Suspense包裹，这样在刷新的时候，就会单独进行骨架的加载。

同理，LatestInvoices 也是一样修改

现在您需要将<Card>组件包装在Suspense中。您可以获取每张卡片的数据，但这可能会导致卡片加载时出现弹出效果，这可能会让用户感到视觉不适。

修改/app/ui/dashboard/Cards.tsx , 增加以下内容

export default async function CardWrapper() {
  const {
    numberOfInvoices,
    numberOfCustomers,
    totalPaidInvoices,
    totalPendingInvoices,
  } = await fetchCardData();
  return (
    <>
      {/* NOTE: Uncomment this code in Chapter 9 */}

      <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"
      />
    </>
  );
}

然后修改/app/dashboard/page.tsx,将卡片的组件使用Suspense 包裹，修改之后的完整路径：

import { lusitana } from "@/app/ui/fonts";
import RevenueChart from "@/app/ui/dashboard/revenue-chart";
import LatestInvoices from "@/app/ui/dashboard/latest-invoices";
import CardWrapper from "@/app/ui/dashboard/Cards";
import { Suspense } from 'react';
import { RevenueChartSkeleton, LatestInvoicesSkeleton, CardsSkeleton } from '@/app/ui/skeletons';

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">
        <Suspense fallback={<CardsSkeleton />}>
          <CardWrapper />
        </Suspense>
      </div>

      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
        <Suspense fallback={<RevenueChartSkeleton />}>
          <RevenueChart />
        </Suspense>
        <Suspense fallback={<LatestInvoicesSkeleton />}>
          <LatestInvoices />
        </Suspense>
      </div>
    </main>
  );
}

刷新页面，您应该会看到所有卡片同时加载。当您希望同时加载多个组件时，可以使用此模式。

决定 Suspense 的边界

Suspense 的界限取决于以下几点：

1. 您希望用户如何体验页面流动的过程。

2. 您想要优先考虑哪些内容。

3. 如果组件依赖于数据获取。

• 您可以像我们一样流式传输整个页面loading.tsx...但如果其中一个组件的数据获取速度较慢，则可能会导致更长的加载时间。

• 您可以单独流式传输每个组件......但这可能会导致 UI在准备就绪时弹出到屏幕上。

• 您还可以通过流式传输页面部分来创建交错效果。但您需要创建包装器组件。

放置 Suspense 边界的位置将取决于您的应用程序。一般来说，将数据提取移至需要它的组件，然后将这些组件包装在 Suspense中是一种很好的做法。但如果您的应用程序需要，那么流式传输部分或整个页面也没有任何问题。

更详细内容查看

独立博客 https://www.dataeast.cn/
CSDN博客 https://blog.csdn.net/siberiaWarpDrive
B站视频空间 https://space.bilibili.com/25871614?spm_id_from=333.1007.0.0
关注 “曲速引擎 Warp Drive” 微信公众号