当前位置： 首页 > news >正文

Next.js - Loading UI and Streaming

news 2026/3/27 2:58:43

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

即时加载状态 

即时加载状态是在导航时立即显示的后备用户界面。您可以预先渲染加载指示器，如骨架和旋转器，或未来屏幕中很小但有意义的部分，如封面照片、标题等。这可以帮助用户了解应用程序的响应情况，并提供更好的用户体验。
在文件夹中添加 loading.js 文件，创建加载状态。

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

在同一文件夹中，loading.js 将嵌套在 layout.js 中。它将自动用 <Suspense> 边界包裹 page.js 文件及其下面的任何子文件。

注意：

  1. 即使是以服务器为中心的路由，导航也是即时的。
  2. 导航是可中断的，这意味着更改路由时无需等待路由内容加载完毕后再导航到另一条路由。
  3. 在加载新路由段时，共享布局仍可保持互动。 
  4. 建议 对路由段（布局和页面）使用 loading.js 约定，因为 Next.js 优化了这一功能。

Streaming with Suspense


什么是流式处理？

要了解 React 和 Next.js 中的流如何工作，了解服务器端渲染（SSR）及其局限性很有帮助。
使用 SSR 时，在用户看到页面并与之交互之前需要完成一系列步骤：

  1. 首先，在服务器上获取指定页面的所有数据。
  2. 然后，服务器渲染页面的 HTML。
  3. 页面的 HTML、CSS 和 JavaScript 发送到客户端。
  4. 使用生成的 HTML 和 CSS 显示非交互式用户界面。
  5. 最后，React 对用户界面进行水合处理，使其具有交互性。

这些步骤都是顺序和阻塞性的，这意味着只有在获取了所有数据后，服务器才能渲染页面的 HTML。而在客户端，React 只有在页面中所有组件的代码都下载完毕后，才能水合用户界面。
使用 React 和 Next.js 的 SSR 可以尽快向用户显示非交互式页面，从而帮助提高感知加载性能。 

 但是，由于在向用户显示页面之前需要完成服务器上的所有数据获取，因此速度仍然会很慢。
通过流式传输，可以将页面的 HTML 分解成较小的块，并逐步将这些块从服务器发送到客户端。

 这样就能更快地显示页面的部分内容，而无需在渲染任何用户界面之前等待加载所有数据。
流媒体与 React 的组件模型配合得很好，因为每个组件都可以被视为一个块。优先级较高的组件（如产品信息）或不依赖数据的组件可以先发送（如布局），这样 React 就可以提前开始水合。优先级较低的组件（如评论、相关产品）可以在获取数据后在同一个服务器请求中发送。

 当你想防止长时间的数据请求阻塞页面渲染时，流媒体尤其有用，因为它可以缩短第一个字节时间（TTFB）和第一个内容画图时间（FCP）。它还有助于缩短交互时间（TTI），尤其是在速度较慢的设备上。

Demo

＜Suspense＞的工作原理是包装执行异步操作（例如获取数据）的组件，在执行异步操作时显示回退UI（例如骨架、微调器），然后在操作完成后交换组件。

// app/dashboard/page.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>)
}

Suspense的优点：

流式服务器渲染--逐步将 HTML 从服务器渲染到客户端。
选择性水合（Selective Hydration）--React 会根据用户的交互情况，优先选择哪些组件进行交互。

SEO


Next.js 将等待 generateMetadata 中的数据获取完成后，再将用户界面流式传输到客户端。这将确保流式响应的第一部分包含 <head> 标记。
由于流式响应是服务器渲染的，因此不会影响搜索引擎优化。您可以使用 Google 提供的移动友好测试工具来查看您的页面在 Google 网络爬虫眼中的显示效果，并查看序列化 HTML（源代码）。


 

相关文章：

Next.js - Loading UI and Streaming

特殊文件 loading.js 可帮助您使用 React Suspense 创建有意义的加载用户界面。使用此约定&#xff0c;您可以在加载路由段内容时显示来自服务器的即时加载状态。渲染完成后&#xff0c;新的内容会自动切换进来。 即时加载状态 即时加载状态是在导航时立即显示的后备用户界面…...

编程日记 2023/8/22 4:35:25

快速解决Ubuntu 中 wine 程序 中文显示为方块/显示错误/无法显示中文（2023）

解决办法就是在创建prefix的命令行里加上LANG“zh_CN.UTF8” 或 LC_ALL“zh_CN.UTF8”&#xff0c;并安装cjkfonts&#xff0c;即可。 1、生成prefix、安装cjk字体 以下是基本流程&#xff1a; 现在假定wine和winetricks已经装好&#xff0c; // 先创建一个prefix&#xff0…...

编程日记 2023/8/22 4:34:23

漏洞指北-VulFocus靶场专栏-中级02

漏洞指北-VulFocus靶场专栏-中级02 中级005 &#x1f338;thinkphp lang 命令执行&#xff08;thinkphp:6.0.12&#xff09;&#x1f338;step1&#xff1a;burp suite 抓包 修改请求头step2 修改成功&#xff0c;访问shell.php 中级006 &#x1f338;Metabase geojson任意文件…...

编程日记 2023/8/22 4:33:21

【开源三方库】bignumber.js：一个大数数学库

OpenHarmony&#xff08;OpenAtom OpenHarmony简称“OpenHarmony”&#xff09;三方库&#xff0c;是经过验证可在OpenHarmony系统上可重复使用的软件组件&#xff0c;可帮助开发者快速开发OpenHarmony应用。如果是发布到开源社区&#xff0c;称为开源三方库&#xff0c;开发者…...

编程日记 2023/8/22 4:32:20

【C++】iota函数 + sort函数实现基于一个数组的多数组对应下标绑定排序

目录 一、iota函数 1. 函数解析 ​① 迭代器类型(补充) ② 头文件 ③ 参数 2. 函数用途与实例 二、sort函数 1、 函数解读 2、实现倒序排列 2.1 greater 与 less 模板参数 2.2 lambda表达式 三、下标绑定排序&#xff08;zip&#xff09; --- 833.字符串中的查找与替换 一、…...

编程日记 2023/8/22 4:31:19

C# window forms 进度条实现

在 C# Windows Forms 应用程序中&#xff0c;如果在后台执行长时间运行的任务&#xff0c;并希望同时更新进度条&#xff0c;可以使用多线程来实现。这将确保进度条的更新不会阻塞主线程&#xff0c;从而保持界面的响应性。以下是一个示例&#xff0c;演示了如何在后台执行任务…...

编程日记 2023/8/22 4:30:17

ListNode相关

目录 2. 链表相关题目 2.1 合并两个有序链表&#xff08;简单&#xff09;&#xff1a;递归 2.2 删除排序链表中的重复元素&#xff08;简单&#xff09;&#xff1a;一次遍历 2.3 两链表相加&#xff08;中等&#xff09;&#xff1a;递归 2.4 删除链表倒数第N个节点&…...

编程日记 2023/8/22 4:29:14

docker的资源控制及docker数据管理

目录 一.docker的资源控制 1.CPU 资源控制 1.1 资源控制工具 1.2 cgroups有四大功能 1.3 设置CPU使用率上限 1.4 进行CPU压力测试 1.5 设置50%的比例分配CPU使用时间上限 1.6 设置CPU资源占用比&#xff08;设置多个容器时才有效&#xff09; 1.6.1 两个容器测试cpu 2&…...

编程日记 2023/8/22 4:28:14

通过请求头传数据向后端发请求

axios &#xff08;get post请求、头部参数添加&#xff09;傻瓜式入门axios_axiospost请求参数_web_blog的博客-CSDN博客...

编程日记 2023/8/22 4:27:12

产品流程图是什么？怎么做？

产品流程图是什么&#xff1f; 产品流程图是一种图形化的表达方式&#xff0c;用于描述产品开发、制造、销售、使用等各个阶段中涉及的流程、步骤和关系。它通过图形符号、箭头、文本等元素&#xff0c;展示了产品的各个环节之间的关联和顺序&#xff0c;通常被用于可视化产…...

编程日记 2023/8/22 4:26:11

面试之快速学习STL-map

关联式容器 包括 map、multimap、set 以及 multiset 这 4 种容器。和序列式容器区别&#xff1a; a . 关联式容器在存储元素时还会为每个元素在配备一个键&#xff0c;整体以键值对的方式存储到容器中。 b . 相比前者&#xff0c;关联式容器可以通过键值直接找到对应的元素&am…...

编程日记 2023/8/22 4:25:05

ES的索引结构与算法解析

提到ES&#xff0c;大多数爱好者想到的都是搜索引擎&#xff0c;但是明确一点&#xff0c;ES不等同于搜索引擎。不管是谷歌、百度、必应、搜狗为代表的自然语言处理(NLP)、爬虫、网页处理、大数据处理的全文搜索引擎&#xff0c;还是有明确搜索目的的搜索行为&#xff0c;如各大…...

编程日记 2023/8/22 4:24:04

32.Netty源码之服务端如何处理客户端新建连接

highlight: arduino-light 服务端如何处理客户端新建连接 Netty 服务端完全启动后&#xff0c;就可以对外工作了。接下来 Netty 服务端是如何处理客户端新建连接的呢&#xff1f; 主要分为四步&#xff1a; md Boss NioEventLoop 线程轮询客户端新连接 OP_ACCEPT 事件&#xff…...

编程日记 2023/8/22 4:23:03

代码随想录day11

20. 有效的括号 ● 力扣题目链接 ● 给定一个只包括 ‘(’&#xff0c;‘)’&#xff0c;‘{’&#xff0c;‘}’&#xff0c;‘[’&#xff0c;‘]’ 的字符串&#xff0c;判断字符串是否有效。 ● 有效字符串需满足&#xff1a; ● 左括号必须用相同类型的右括号闭合。 ● 左…...

编程日记 2023/8/22 4:22:02

RabbitMQ实习面试题

RabbitMQ实习面试题 在 RabbitMQ 中&#xff0c;确保生产者消息正确发布以及确保消费者已经消费是非常重要的任务。以下是一些方法和策略&#xff0c;可以帮助您在 RabbitMQ 中实现这些目标&#xff1a; 确保生产者消息正确发布&#xff1a; 持久化消息&#xff1a;将消息设…...

编程日记 2023/8/22 4:21:01

Electron入门，项目运行，只需四步轻松搞定。

electron 简单介绍&#xff1a; 实现&#xff1a;HTML/CSS/JS桌面程序&#xff0c;搭建跨平台桌面应用。 electron 官方文档&#xff1a; [https://electronjs.org/docs] 本文是基于以下2篇文章且自行实践过的&#xff0c;可行性真实有效。 文章1&#xff1a; https://www.cnbl…...

编程日记 2023/8/22 4:20:00

【C++】visualstudio环境安装

记录了部分安装步骤&#xff0c;可能有点不全&#xff0c;参考下&#xff0c;需要的磁盘空间差不多20GB&#xff1b; 下载 https://visualstudio.microsoft.com/zh-hans/vs/ 下载完成&#xff1a; 双击进入安装状态&#xff1a; 根据自己的需求勾选安装项&#xff1a; 选择…...

编程日记 2023/8/22 4:18:58

使用MySQL:5.6和owncloud镜像搭建个人网盘

拉取镜像 [rootkvm ~]# docker pull mysql:5.6[rootkvm ~]# docker pull owncloud启动mysql容器 [rootkvm ~]# docker run -d --name db1 -e MYSQL_ROOT_PASSWORDroot mysql:5.6 db832e4e4333a0e9a7c152a67272721fdbe5381054090c5eb24f90455390a852 [rootkvm ~]# docker ps …...

编程日记 2023/8/22 4:17:55

php中创建对象时传递的参数是构造方法

PHP中创建对象时&#xff0c;可以通过构造方法的参数来传递参数值。构造方法是一个特殊的方法&#xff0c;在创建对象时会自动调用&#xff0c;用于进行对象的初始化操作。 以下是一个示例代码&#xff0c;展示了如何在PHP中使用构造方法传递参数&#xff1a; class MyClass …...

编程日记 2023/8/22 4:16:53

C++并发及互斥保护示例

最近要写一个多线程的并发数据库&#xff0c;主要是希望使用读写锁实现库的并发访问&#xff0c;同时考虑到其他平台(如Iar)没有C的读写锁&#xff0c;需要操作系统提供&#xff0c;就将读写锁封装起来。整个过程还是比较曲折的&#xff0c;碰到了不少问题&#xff0c;在此就简…...

编程日记 2023/8/22 4:15:51

LeagueAkari：基于LCU API的英雄联盟自动化工具集架构设计与实战应用

LeagueAkari&#xff1a;基于LCU API的英雄联盟自动化工具集架构设计与实战应用 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit L…...

编程新知 2026/3/27 2:48:46

从Pikachu靶场实战解析越权漏洞：原理、攻击与防御

1. 越权漏洞&#xff1a;Web安全的隐形杀手 第一次接触越权漏洞是在三年前的一次渗透测试中&#xff0c;当时客户系统有个"查看订单详情"的功能&#xff0c;我无意间发现修改URL中的订单ID就能看到别人的订单信息。这种看似简单的漏洞&#xff0c;实际上危害极大——…...

编程新知 2026/3/27 2:46:46

**Modbus协议深度解析：基于Python的TCP通信实战与发散创新应用**在工业自动化领域，**Modbus协议

Modbus协议深度解析&#xff1a;基于Python的TCP通信实战与发散创新应用 在工业自动化领域&#xff0c;Modbus协议因其简单、稳定和开放性成为最广泛使用的串行通信标准之一。本文将从底层原理出发&#xff0c;深入剖析 Modbus TCP 的数据帧结构&#xff0c;并结合 Python 实现…...

编程新知 2026/3/27 2:38:45

AI性能测试：TPS之外还要关注什么？

在AI驱动的时代&#xff0c;性能测试已成为软件测试从业者的核心技能。传统软件测试中&#xff0c;TPS&#xff08;Transactions Per Second&#xff0c;每秒事务处理量&#xff09;常被视为黄金指标&#xff0c;用于衡量系统的吞吐能力。然而&#xff0c;AI系统因其独特的计算…...

编程新知 2026/3/27 1:48:35

从Flask裸奔到MCP标准落地：7步迁移指南+自动转换脚本（已验证支撑日均50万次Agent调用）

第一章&#xff1a;Python MCP 服务器开发模板概览与核心价值Python MCP&#xff08;Model-Controller-Protocol&#xff09;服务器开发模板是一套面向协议驱动微服务架构的轻量级开发框架&#xff0c;专为快速构建符合 MCP 规范的 AI 工具集成后端而设计。它抽象了协议适配、会…...

编程新知 2026/3/27 0:43:36

Go-Gin-API跨域处理终极指南：5分钟配置CORS中间件

Go-Gin-API跨域处理终极指南&#xff1a;5分钟配置CORS中间件 【免费下载链接】go-gin-api xinliangnote/go-gin-api 是一个用于快速构建 Go 语言 API 的框架。适合在Go语言开发的Web应用中使用&#xff0c;提供丰富的中间件和模块化架构。特点是提供了简洁的API、自动化API文档…...

编程新知 2026/3/26 23:30:57

戴尔Precision Pro商务笔记本回归，新一代产品聚焦便携性

看起来2026年是戴尔按下重启键的一年——在消费者和商用产品线中&#xff0c;戏剧性的品牌重塑都在被回归。有时候&#xff0c;老品牌确实是好品牌&#xff1a;熟悉的XPS名称和设计今年回归是有原因的&#xff0c;绝对不是因为戴尔Premium有正面的品牌认知度。在戴尔商务产品方…...

编程新知 2026/3/26 23:26:56

Quartus-II 9.0实战：从半加器到4位加法器的数字逻辑设计全流程解析

1. 半加器设计&#xff1a;数字逻辑的起点 半加器是数字电路设计中最基础的加法单元&#xff0c;理解它的工作原理对后续学习全加器和多位加法器至关重要。半加器之所以称为"半"&#xff0c;是因为它只能处理两个1位二进制数的相加&#xff0c;不考虑来自低位的进位输…...

编程新知 2026/3/26 21:50:03

终极指南：如何在Windows电脑上直接安装Android应用

终极指南&#xff1a;如何在Windows电脑上直接安装Android应用 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer APK Installer是一款专为Windows系统设计的Android应用安…...

编程新知 2026/3/26 21:27:59

华为AR路由器VRRP配置实战：从单点故障到流量黑洞，一个实验全搞定

华为AR路由器VRRP高可用实战&#xff1a;规避单点故障与流量黑洞的深度解析 在现网架构中&#xff0c;网关设备的可靠性直接决定了整个网络的稳定性。想象一下这样的场景&#xff1a;当核心网关突然宕机&#xff0c;整个办公区的网络瞬间瘫痪&#xff0c;业务系统中断&#xff…...

编程新知 2026/3/26 21:01:50