005 界面 Streaming

目录

• 知识介绍：什么是界面 Streaming
• loading.tsx加载
  • loading.tsx
  • 页面加载骨架 a loading skeleton
  • Route Group，并修正 loading 影响子页面的问题
• 组件 Streaming
  • 案例：删掉 fetchRevenue()
  • 使用 Suspense
  • 修改 <RevenueChart>
  • Streaming <LatestInvoices>
• 将组件成组
  • 知识解释
  • page.tsx修改
  • cards.tsx修改
• 讨论：在何处设置 Suspense 边界
• 部分渲染 Partial Prerendering
  • 问题与方案
  • 部分渲染
• 一些总结

本文对应 Next.js Learn 入门教程的第 8-10 章。

• loading.tsx
• <Suspense>

知识介绍：什么是界面 Streaming

https://nextjs.org/learn/dashboard-app/fetching-data#practice-fetch-data-for-the-card-components#what-is-streaming

Streaming is a data transfer technique that allows you to break down a route into smaller "chunks" and progressively stream them from the server to the client as they become ready.

By streaming, you can prevent slow data requests from blocking your whole page. This allows the user to see and interact with parts of the page without waiting for all the data to load before any UI can be shown to the user.

Streaming works well with React's component model, as each component can be considered a chunk.

There are two ways you implement streaming in Next.js:

1. At the page level, with the loading.tsx file.
2. For specific components, with <Suspense>.

Let's see how this works.

什么是流式传输？

流式传输是一种数据传输技术，它允许你将路由（数据请求）分解为较小的“块”（chunk），并随着这些块准备就绪，逐步将它们从服务器流传输到客户端。

通过流式传输，你可以阻止缓慢的数据请求阻塞整个页面。这允许用户在等待所有数据加载完成之前，就能看到页面的部分内容并与之交互。

流式传输与React的组件模型相得益彰，因为每个组件都可以被视为一个_块_。

在Next.js中，有两种实现流式传输的方法：

1. 在页面级别，通过loading.tsx文件。
2. 对于特定组件，通过<Suspense>。

让我们看看这是如何工作的。

loading.tsx加载

loading.tsx

loading.tsx is a special file that you can create to progressively stream the page's content.

When you create a loading.tsx file in a path, Next.js will automatically stream the content of the page as it becomes ready.

loading.tsx 是你创建的一个特殊文件，用于逐步流式传输页面内容。

当你在路径中创建一个 loading.tsx 文件时，Next.js 将会自动地流式传输页面内容，随着内容准备就绪而进行。

/app/dashboard/loading.tsx

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

A few things are happening here:

1. loading.tsx is a special Next.js file built on top of Suspense, it allows you to create fallback UI to show as a replacement while page content loads.
2. Since <SideNav> is static, it's shown immediately. The user can interact with <SideNav> while the dynamic content is loading.
3. The user doesn't have to wait for the page to finish loading before navigating away (this is called interruptable navigation).

Congratulations! You've just implemented streaming. But we can do more to improve the user experience. Let's show a loading skeleton instead of the Loading… text.

在此处发生了几件事情：

1. loading.tsx 是一个基于 Suspense 构建的特殊 Next.js 文件，它允许你创建回退用户界面作为页面内容加载时的替代展示。
2. 由于 <SideNav> 是静态的，因此它会立即显示出来。用户可以在动态内容正在加载时与 <SideNav> 进行交互。
3. 用户不必等待页面完全加载完毕就可以进行导航（这称为可中断导航）。

恭喜你！你刚刚实现了流式处理。但是我们还可以做更多事情来改善用户体验。让我们展示一个加载骨架，而不是 Loading… 文本。

页面加载骨架 a loading skeleton

/app/dashboard/loading.tsx

import DashboardSkeleton from '@/app/ui/skeletons';

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

Route Group，并修正 loading 影响子页面的问题

We can change this with Route Groups. Create a new folder called /(overview) inside the dashboard folder. Then, move your loading.tsx and page.tsx files inside the folder:

Now, the loading.tsx file will only apply to your dashboard overview page.

组件 Streaming

https://nextjs.org/learn/dashboard-app/fetching-data#streaming-a-component

案例：删掉 fetchRevenue()

/app/dashboard/(overview)/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';
import { fetchLatestInvoices, fetchCardData } from '@/app/lib/data'; // remove fetchRevenue

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

  return (
    // ...
  );
}

使用 Suspense

/app/dashboard/(overview)/page.tsx

1. Suspense
2. 用 <Suspense> 包裹组件
3. 更改 <RevenueChart />

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 { fetchLatestInvoices, fetchCardData } from '@/app/lib/data';
import { Suspense } from 'react';
import { RevenueChartSkeleton } from '@/app/ui/skeletons';

export default async function Page() {
  const latestInvoices = await fetchLatestInvoices();
  const {
    numberOfInvoices,
    numberOfCustomers,
    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">
        <Suspense fallback={<RevenueChartSkeleton />}>
          <RevenueChart />
        </Suspense>
        <LatestInvoices latestInvoices={latestInvoices} />
      </div>
    </main>
  );
}

修改 <RevenueChart>

改成在组件内加载数据。

/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 { fetchRevenue } from '@/app/lib/data';

// ...

export default async function RevenueChart() { // Make component async, remove the props
  const revenue = await fetchRevenue(); // Fetch data inside the component

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

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

  return (
    // ...
  );
}

带 props 与不带 props 函数直观对比

修改前

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

export default async function RevenueChart({
  revenue,
}: {
  revenue: Revenue[];
}) {

修改后

export default async function RevenueChart() { // Make component async, remove the props

• 这个函数接受一个参数，这个参数是一个对象，这个对象有一个 revenue 属性，这个属性是 Revenue 类型的数组。这种写法是 TypeScript 中的解构赋值和类型注解的结合。

在这个函数中，{ revenue, }: { revenue: Revenue[]; } 是函数的参数。这是一个对象参数，它有一个名为 revenue 的属性，这个属性的类型是 Revenue[]，即 Revenue 类型的数组。

这种写法是 TypeScript 的类型注解，它可以让 TypeScript 知道 revenue 应该是一个 Revenue 类型的数组。

这个函数是一个 React 函数组件，revenue 是传递给这个组件的 props。在 React 中，组件的 props 是一个对象，它包含了传递给组件的所有属性。在这个例子中，RevenueChart 组件接受一个名为 revenue 的 prop，这个 prop 是一个 Revenue 类型的数组。

Streaming <LatestInvoices>

https://nextjs.org/learn/dashboard-app/streaming#practice-streaming-latestinvoices

将组件成组

知识解释

https://nextjs.org/learn/dashboard-app/streaming#grouping-components

Grouping components

Great! You're almost there, now you need to wrap the <Card> components in Suspense. You can fetch data for each individual card, but this could lead to a popping effect as the cards load in, this can be visually jarring for the user.

So, how would you tackle this problem?

To create more of a staggered effect, you can group the cards using a wrapper component. This means the static <SideNav/> will be shown first, followed by the cards, etc.

page.tsx修改

In your page.tsx file:

1. Delete your <Card> components.
2. Delete the fetchCardData() function.
3. Import a new wrapper component called <CardWrapper />.
4. Import a new skeleton component called <CardsSkeleton />.
5. Wrap <CardWrapper /> in Suspense.

分组组件

很好！你已经差不多完成了，现在你需要将 <Card> 组件放入 Suspense 中。你可以为每张单独的卡片抓取数据，但这可能会导致卡片加载时出现 弹出 效果，这种效果从视觉上可能会对用户产生冲击。

那么，你应该如何解决这个问题呢？

为了创造更有层次感的 交错 效果，你可以使用一个包装器组件来分组这些卡片。这意味着静态的 <SideNav/> 将首先显示，然后是卡片等等。

在你的 page.tsx 文件中：

1. 删除你的 <Card> 组件。
2. 删除 fetchCardData() 函数。
3. 导入一个新的包装器组件，名为 <CardWrapper />。
4. 导入一个新的骨架组件，名为 <CardsSkeleton />。
5. 使用 Suspense 包装 <CardWrapper />。

cards.tsx修改

https://nextjs.org/learn/dashboard-app/streaming#grouping-components

(略)

讨论：在何处设置 Suspense 边界

https://nextjs.org/learn/dashboard-app/streaming#practice-streaming-latestinvoices#deciding-where-to-place-your-suspense-boundaries

Deciding where to place your Suspense boundaries

Where you place your Suspense boundaries will depend on a few things:

1. How you want the user to experience the page as it streams.
2. What content you want to prioritize.
3. If the components rely on data fetching.

Take a look at your dashboard page, is there anything you would've done differently?

Don't worry. There isn't a right answer.

• You could stream the whole page like we did with loading.tsx... but that may lead to a longer loading time if one of the components has a slow data fetch.
• You could stream every component individually... but that may lead to UI popping into the screen as it becomes ready.
• You could also create a staggered effect by streaming page sections. But you'll need to create wrapper components.

Where you place your suspense boundaries will vary depending on your application. In general, it's good practice to move your data fetches down to the components that need it, and then wrap those components in Suspense. But there is nothing wrong with streaming the sections or the whole page if that's what your application needs.

Don't be afraid to experiment with Suspense and see what works best, it's a powerful API that can help you create more delightful user experiences.

决定在何处设置你的 Suspense 边界

你设置 Suspense 边界的位置将取决于几个因素：

1. 你希望用户在页面加载过程中的体验方式。
2. 你希望优先加载的内容。
3. 组件是否依赖数据获取。

观察一下你的控制面板页面，是否有什么地方你会采取不同的做法？

不用担心。没有唯一正确的答案。

• 你可以像我们在 loading.tsx 中所做的那样流式加载整个页面……但如果其中一个组件的数据获取速度很慢，这可能导致更长的加载时间。
• 你可以流式加载每个组件……但这可能会导致用户界面随着准备就绪而出现在屏幕中，产生“突兀出现”的效果。
• 你还可以通过流式加载页面各个部分来创建一种“分阶段”的效果。但是，你需要创建包装组件。

你设置 suspense 边界的位置将根据你的应用而变化。通常，将数据获取下移至需要它们的组件中，并然后用 Suspense 将这些组件包装起来，这是一个好习惯。但是，如果这是你的应用所需，那么流式加载各个部分或整个页面也没有问题。

不要害怕尝试使用 Suspense 并查看最适合你的是什么，它是一个强大的 API，可以帮助你创建更令人愉悦的用户体验。

部分渲染 Partial Prerendering

Partial Prerendering (Optional)

https://nextjs.org/learn/dashboard-app/partial-prerendering

问题与方案

Combining Static and Dynamic Content

Currently, if you call a dynamic function inside your route (e.g. noStore(), cookies(), etc), your entire route becomes dynamic.

This is how most web apps are built today. You either choose between static and dynamic rendering for your entire application or for a specific route.

However, most routes are not fully static or dynamic. You may have a route that has both static and dynamic content. For example, consider an ecommerce site. You might be able to prerender the majority of the product page, but you may want to fetch the user's cart and recommended products dynamically on-demand.

Going back to your dashboard page, what components would you consider static vs. dynamic?

Once you're ready, click the button below to see how we would split the dashboard route:

结合静态和动态内容

目前，如果在你的路由中调用一个动态函数（例如，noStore()、cookies() 等），那么你整个路由都将变为动态的。

这是现今大多数网页应用程序构建的方式。你要么选择将渲染设置为静态模式，覆盖整个应用程序，要么选择特定路由的动态模式。

然而，大多数路由并非完全静态或动态。你可能有一个同时包含静态和动态内容的路由。例如，考虑一个电子商务网站。你可能能够预渲染产品页面的大部分内容，但你可能希望在请求时动态地获取用户的购物车和推荐产品。

回到你的仪表盘页面，你会认为哪些组件是静态的，哪些是动态的？

准备好之后，点击下面的按钮查看我们将如何拆分仪表盘路由：

• The <SideNav> Component doesn't rely on data and is not personalized to the user, so it can be static.
• The components in <Page> rely on data that changes often and will be personalized to the user, so they can be dynamic.

图示展现了侧边导航（<SideNav>）是静态的，而页面的子组件是动态的。

• <SideNav> 组件不依赖数据且不根据用户个性化定制，因此可以是静态的。
• <Page> 中的组件依赖频繁变化的数据，并将根据用户个性化定制，所以它们可以是动态的。

部分渲染

What is Partial Prerendering?

Next.js 14 contains a preview of Partial Prerendering – an experimental feature that allows you to render a route with a static loading shell, while keeping some parts dynamic. In other words, you can isolate the dynamic parts of a route. For example:

When a user visits a route:

• A static route shell is served, ensuring a fast initial load.
• The shell leaves holes where dynamic content will load in asynchronous.
• The async holes are streamed in parallel, reducing the overall load time of the page.

This is different from how your application behaves today, where entire routes are either entirely static or dynamic.

Partial Prerendering combines ultra-quick static edge delivery with fully dynamic capabilities and we believe it has the potential to become the default rendering model for web applications, bringing together the best of static site generation and dynamic delivery.

Next.js 14 版本中包含了一个预览特性——部分预渲染（Partial Prerendering），它是一个实验性功能，允许你为路由渲染一个静态加载壳体，同时保持某些部分为动态内容。换句话说，你可以将路由的动态部分隔离开来。例如：

（图像：部分预渲染的产品页面，展示了静态导航和产品信息，以及动态购物车和推荐产品）

当用户访问一个路由时：

• 提供一个静态的路由壳体，确保快速的首次加载。
• 该壳体在其中留下了动态内容将异步加载的空白区域。
• 异步空白区域会并行地流式传输，减少了页面的整体加载时间。

这与当前应用程序的行为不同，在那里整个路由要么完全是静态的，要么完全是动态的。

部分预渲染结合了超快静态边缘交付和完全动态能力，我们相信它有潜力成为网络应用程序的默认渲染模型，汇集了静态站点生成和动态交付的最佳属性。

一些总结

Summary

To recap, you've done a few things to optimize data fetching in your application, you've:

1. Created a database in the same region as your application code to reduce latency between your server and database.
2. Fetched data on the server with React Server Components. This allows you to keep expensive data fetches and logic on the server, reduces the client-side JavaScript bundle, and prevents your database secrets from being exposed to the client.
3. Used SQL to only fetch the data you needed, reducing the amount of data transferred for each request and the amount of JavaScript needed to transform the data in-memory.
4. Parallelize data fetching with JavaScript - where it made sense to do so.
5. Implemented Streaming to prevent slow data requests from blocking your whole page, and to allow the user to start interacting with the UI without waiting for everything to load.
6. Move data fetching down to the components that need it, thus isolating which parts of your routes should be dynamic in preparation for Partial Prerendering.

In the next chapter, we'll look at two common patterns you might need to implement when fetching data: search and pagination.

为了回顾一下，你已经为了优化应用程序中的数据获取做了几件事，具体来说你已经：

1. 在与应用程序代码同一区域创建了数据库，以减少服务器和数据库之间的延迟。
2. 在服务器上使用 React 服务器组件来获取数据。这样可以将昂贵的数据获取和逻辑保留在服务器上，减少客户端 JavaScript 包的大小，并防止数据库密钥暴露给客户端。
3. 使用 SQL 只获取你需要的数据，减少了每次请求传输的数据量以及在内存中转换数据所需的 JavaScript 量。
4. 在逻辑上合理时，并行化使用 JavaScript 获取数据。
5. 实现了流式传输（Streaming），以防缓慢的数据请求阻塞整个页面，并允许用户在不等待全部内容加载完毕的情况下开始与用户界面交互。
6. 将数据获取下移到需要它的组件中，从而隔离了哪些部分的路由应是动态的，为部分预渲染做准备。

在下一章中，我们将探讨在获取数据时可能需要实现的两种常见模式：搜索和分页。