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

Next.js - Loading UI and Streaming

news 2025/12/12 20:11:09

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

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2025/12/12 8:17:43

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2025/12/8 19:03:53

突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

编程新知 2025/12/12 3:35:27

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/11/20 7:52:01

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2025/12/8 7:57:29

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

编程新知 2025/12/9 0:43:28

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

编程新知 2025/12/9 4:09:36

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2025/12/9 5:12:08

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2025/12/9 7:15:15

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

编程新知 2025/12/12 4:31:49