上回说到我们使用静态渲染的方法，会导致页面加载慢的问题，这节我们来讲一下当数据请求缓慢的时候，如何改善用户体验。
在本节中，我们将会讨论：
什么是流媒体以及何时可以使用它。
如何使用loading.tsx Suspense 实现流式传输。
什么是加载骨架。
什么是路线组，以及何时可以使用它们。
在您的应用程序中，Suspense 边界应放在哪里。
什么是流媒体
流式传输是一种数据传输技术，允许您将路由分解为更小的“块”，并在它们准备就绪时逐步将它们从服务器流式传输到客户端。
通过流式传输，您可以防止缓慢的数据请求阻塞整个页面。这样一来，用户就可以查看页面的各个部分并与之交互，而无需等待所有数据加载完毕后才能向用户显示任何 UI。
流式传输与 React 的组件模型配合得很好，因为每个组件都可以看作一个块。
有两种方法可以在 Next.js 中实现流式传输：
在页面级别，使用loading.tsx文件。
对于特定组件，使用<Suspense>。
接下来，我们看看这是如何工作的
使用流式传输整个页面 loading.tsx
在该/app/dashboard文件夹中，创建一个名为loading.tsx：
export default function Loading() {
return <div>Loading...</div>;
}
这里发生了一些事情：
loading.tsx是一个基于 Suspense 构建的特殊 Next.js 文件，它允许您创建后备 UI，以在页面内容加载时替代显示。
由于<SideNav>是静态的，所以会立即显示。用户可以<SideNav>在动态内容加载时进行交互。
用户不必等待页面加载完毕即可离开（这称为可中断导航）。
恭喜！您刚刚实现了流式传输。但我们可以做更多来改善用户体验。让我们显示加载骨架而不是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 的界限取决于以下几点：
您希望用户如何体验页面流动的过程。
您想要优先考虑哪些内容。
如果组件依赖于数据获取。
您可以像我们一样流式传输整个页面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” 微信公众号
