loading.js

以下是您要求的翻译内容：

loading.js 特殊文件可帮助您使用 React Suspense 创建有意义的加载 UI。通过此约定，您可以在路由段内容流式传输时，从服务器显示即时加载状态。新内容在完成后会自动替换。

tsx

export default function Loading() {
    // Or a custom loading skeleton component
    return <p>Loading...</p>;
}

jsx

export default function Loading() {
    // Or a custom loading skeleton component
    return <p>Loading...</p>;
}

在 loading.js 文件中，您可以添加任何轻量级加载 UI。您可能会发现使用 React Developer Tools 手动切换 Suspense 边界很有帮助。

默认情况下，此文件是一个服务器组件——但也可以通过 "use client" 指令用作客户端组件。

参考

参数

加载 UI 组件不接受任何参数。

行为

即时加载状态

即时加载状态是导航时立即显示的回退 UI。您可以预渲染加载指示器，例如骨架屏和加载旋转器，或未来屏幕的一小部分但有意义的内容，例如封面照片、标题等。这有助于用户了解应用正在响应，并提供更好的用户体验。

通过在文件夹中添加 loading.js 文件来创建加载状态。

tsx

export default function Loading() {
    // You can add any UI inside Loading, including a Skeleton.
    return <LoadingSkeleton />;
}

jsx

export default function Loading() {
    // You can add any UI inside Loading, including a Skeleton.
    return <LoadingSkeleton />;
}

在同一个文件夹中，loading.js 将嵌套在 layout.js 内部。它将自动把 page.js 文件和其下的任何子代包装在一个 <Suspense> 边界中。

SEO

对于只抓取静态 HTML 且无法像完整浏览器一样执行 JavaScript 的机器人（例如 Twitterbot），Next.js 会在流式传输 UI 之前解析 generateMetadata，并将元数据放置在初始 HTML 的 <head> 中。
否则，可以使用流式元数据。Next.js 会自动检测用户代理，以在阻塞和流式传输行为之间进行选择。
由于流式传输是服务器渲染的，因此它不影响 SEO。您可以使用 Google 的富媒体搜索结果测试工具来查看您的页面在 Google 网络爬虫中的显示方式，并查看序列化的 HTML（来源）。

状态码

进行流式传输时，会返回 200 状态码，表示请求成功。

服务器仍然可以在流式传输的内容本身中向客户端传达错误或问题，例如在使用 redirect 或 notFound 时。由于响应头已发送到客户端，因此响应的状态码无法更新。

例如，当一个 404 页面流式传输到客户端时，Next.js 会在流式传输的 HTML 中包含一个 <meta name="robots" content="noindex"> 标签。这会阻止搜索引擎索引该 URL，即使 HTTP 状态码为 200。请参阅 Google 关于 robots meta 标签的指南。

有些爬虫可能会将这些响应标记为“软 404”。在流式传输的情况下，这不会导致索引，因为该页面在 HTML 中已明确标记为 noindex。

如果您需要 404 状态（为了合规性或分析），请确保资源在响应体流式传输之前存在，以便服务器可以设置 HTTP 状态码。

您可以在 proxy 中运行此检查，以将缺失的 slug 重写为未找到路由，或生成 404 响应。请保持代理检查快速，并避免在那里获取完整内容。

响应体何时开始流式传输？

当 Suspense 回退渲染（例如 loading.tsx）或当服务器组件在 <Suspense> 边界下挂起时，响应体开始流式传输。请将 notFound() 放置在这些边界之前以及任何可能挂起的 await 之前。

要开始流式传输，必须设置响应头。这就是为什么在流式传输开始后无法更改状态码的原因。

浏览器限制

一些浏览器会缓冲流式响应。您可能要等到响应超过 1024 字节后才能看到流式响应。这通常只影响“hello world”应用，但不影响实际应用。

平台支持

部署选项	支持
Node.js 服务器	是
Docker 容器	是
静态导出	否
适配器	平台相关

了解如何在自托管 Next.js 时配置流式传输。

示例

使用 Suspense 进行流式传输

除了 loading.js，您还可以手动为自己的 UI 组件创建 Suspense 边界。App Router 支持使用 Suspense 进行流式传输。

<Suspense> 的工作原理是：包装一个执行异步操作（例如，获取数据）的组件，在操作进行时显示回退 UI（例如，骨架屏、加载旋转器），然后一旦操作完成，就替换为您的组件。

tsx

import { Suspense } from "react";
import { PostFeed, Weather } from "./Components";

export default function Posts() {
    return (
        <section>
            <Suspense fallback={<p>Loading feed...</p>}>
                <PostFeed />
            </Suspense>
            <Suspense fallback={<p>Loading weather...</p>}>
                <Weather />
            </Suspense>
        </section>
    );
}

jsx

import { Suspense } from "react";
import { PostFeed, Weather } from "./Components";

export default function Posts() {
    return (
        <section>
            <Suspense fallback={<p>Loading feed...</p>}>
                <PostFeed />
            </Suspense>
            <Suspense fallback={<p>Loading weather...</p>}>
                <Weather />
            </Suspense>
        </section>
    );
}

通过使用 Suspense，您可以获得以下好处：

流式服务器渲染 - 将 HTML 从服务器逐步渲染到客户端。
选择性水合 - React 根据用户交互，优先使哪些组件首先具有交互性。

有关更多 Suspense 示例和用例，请参阅 React 文档。

版本历史

版本	变更
`v13.0.0`	引入 `loading`。

以下是您要求的翻译内容：

tsx

export default function Loading() {
    // Or a custom loading skeleton component
    return <p>Loading...</p>;
}

jsx

export default function Loading() {
    // Or a custom loading skeleton component
    return <p>Loading...</p>;
}

在 loading.js 文件中，您可以添加任何轻量级加载 UI。您可能会发现使用 React Developer Tools 手动切换 Suspense 边界很有帮助。

默认情况下，此文件是一个服务器组件——但也可以通过 "use client" 指令用作客户端组件。

参考

参数

加载 UI 组件不接受任何参数。

行为

即时加载状态

通过在文件夹中添加 loading.js 文件来创建加载状态。

tsx

export default function Loading() {
    // You can add any UI inside Loading, including a Skeleton.
    return <LoadingSkeleton />;
}

jsx

export default function Loading() {
    // You can add any UI inside Loading, including a Skeleton.
    return <LoadingSkeleton />;
}

在同一个文件夹中，loading.js 将嵌套在 layout.js 内部。它将自动把 page.js 文件和其下的任何子代包装在一个 <Suspense> 边界中。

SEO

对于只抓取静态 HTML 且无法像完整浏览器一样执行 JavaScript 的机器人（例如 Twitterbot），Next.js 会在流式传输 UI 之前解析 generateMetadata，并将元数据放置在初始 HTML 的 <head> 中。
否则，可以使用流式元数据。Next.js 会自动检测用户代理，以在阻塞和流式传输行为之间进行选择。
由于流式传输是服务器渲染的，因此它不影响 SEO。您可以使用 Google 的富媒体搜索结果测试工具来查看您的页面在 Google 网络爬虫中的显示方式，并查看序列化的 HTML（来源）。

状态码

进行流式传输时，会返回 200 状态码，表示请求成功。

有些爬虫可能会将这些响应标记为“软 404”。在流式传输的情况下，这不会导致索引，因为该页面在 HTML 中已明确标记为 noindex。

如果您需要 404 状态（为了合规性或分析），请确保资源在响应体流式传输之前存在，以便服务器可以设置 HTTP 状态码。

您可以在 proxy 中运行此检查，以将缺失的 slug 重写为未找到路由，或生成 404 响应。请保持代理检查快速，并避免在那里获取完整内容。

响应体何时开始流式传输？

要开始流式传输，必须设置响应头。这就是为什么在流式传输开始后无法更改状态码的原因。

浏览器限制

一些浏览器会缓冲流式响应。您可能要等到响应超过 1024 字节后才能看到流式响应。这通常只影响“hello world”应用，但不影响实际应用。

平台支持

部署选项	支持
Node.js 服务器	是
Docker 容器	是
静态导出	否
适配器	平台相关

了解如何在自托管 Next.js 时配置流式传输。

示例

使用 Suspense 进行流式传输

除了 loading.js，您还可以手动为自己的 UI 组件创建 Suspense 边界。App Router 支持使用 Suspense 进行流式传输。

tsx

import { Suspense } from "react";
import { PostFeed, Weather } from "./Components";

export default function Posts() {
    return (
        <section>
            <Suspense fallback={<p>Loading feed...</p>}>
                <PostFeed />
            </Suspense>
            <Suspense fallback={<p>Loading weather...</p>}>
                <Weather />
            </Suspense>
        </section>
    );
}

jsx

import { Suspense } from "react";
import { PostFeed, Weather } from "./Components";

export default function Posts() {
    return (
        <section>
            <Suspense fallback={<p>Loading feed...</p>}>
                <PostFeed />
            </Suspense>
            <Suspense fallback={<p>Loading weather...</p>}>
                <Weather />
            </Suspense>
        </section>
    );
}

通过使用 Suspense，您可以获得以下好处：

流式服务器渲染 - 将 HTML 从服务器逐步渲染到客户端。
选择性水合 - React 根据用户交互，优先使哪些组件首先具有交互性。

有关更多 Suspense 示例和用例，请参阅 React 文档。

版本历史

版本	变更
`v13.0.0`	引入 `loading`。

文档导航

参考

参数

行为

导航

即时加载状态

SEO

状态码

浏览器限制

平台支持

示例

使用 Suspense 进行流式传输

版本历史

参考

参数

行为

导航

即时加载状态

SEO

状态码

浏览器限制

平台支持

示例

使用 Suspense 进行流式传输

版本历史