loading.js

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

export default function Loading() {
  // 或自定义加载骨架组件
  return <p>加载中...</p>
}

export default function Loading() {
  // 或自定义加载骨架组件
  return <p>加载中...</p>
}

在 loading.js 文件中，您可以添加任何轻量级的加载界面。使用 React 开发者工具手动切换 Suspense 边界可能会有所帮助。

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

参考

参数

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

行为

即时加载状态

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

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

export default function Loading() {
  // 您可以在 Loading 中添加任何界面，包括骨架屏。
  return <LoadingSkeleton />
}

export default function Loading() {
  // 您可以在 Loading 中添加任何界面，包括骨架屏。
  return <LoadingSkeleton />
}

在同一文件夹中，loading.js 将嵌套在 layout.js 内。它会自动将 page.js 文件及其子级包裹在 <Suspense> 边界中。

SEO

Next.js 会等待 generateMetadata 内的数据获取完成后再向客户端流式传输界面。这保证了流式响应的第一部分包含 <head> 标签。
由于流式传输是服务端渲染的，因此不会影响 SEO。您可以使用 Google 的富媒体搜索结果测试工具查看页面在 Google 网络爬虫中的呈现方式，并查看序列化的 HTML（来源）。

状态码

流式传输时，将返回 200 状态码以表示请求成功。

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

浏览器限制

某些浏览器会缓冲流式响应。在响应超过 1024 字节之前，您可能看不到流式响应。这通常只影响 "hello world" 应用，而不影响实际应用。

平台支持

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

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

示例

使用 Suspense 流式传输

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

<Suspense> 的工作原理是包裹执行异步操作（如获取数据）的组件，在操作进行时显示回退界面（如骨架屏、旋转器），然后在操作完成后替换为您的组件。

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

export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>加载动态中...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>加载天气中...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

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

export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>加载动态中...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>加载天气中...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

使用 Suspense 可以获得以下好处：

流式服务端渲染 - 逐步从服务器向客户端渲染 HTML。
选择性注水 - React 根据用户交互优先处理哪些组件使其可交互。

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

版本历史

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

On this page