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

Next.js - Loading UI and Streaming

news 2025/10/26 20:12:27

特殊文件 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

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

编程新知 2025/10/25 12:27:41

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2025/10/25 18:00:07

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/10/26 2:03:27

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

编程新知 2025/10/25 0:08:23

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

编程新知 2025/10/25 12:56:40

安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

编程新知 2025/10/22 19:51:54

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

编程新知 2025/6/17 3:19:01

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2025/9/28 3:38:54

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

编程新知 2025/10/19 21:40:22

【p2p、分布式，区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

编程新知 2025/10/18 14:20:21