NextJs教程系列(四)：路由loading

已于 2024-03-08 11:05:02 修改
阅读量873 收藏 5
点赞数 4
分类专栏： NextJs教程 文章标签： javascript 开发语言 ecmascript
于 2024-03-08 11:02:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuihao19970905/article/details/136556277
版权

loading加载

loading.js 可以帮助你使用React Suspense创建一个组件, 当你在加载路由内容时，它会显示该加载状态组件，渲染完成后，新的内容将会自动替换。

传统ssr渲染流程

在这里插入图片描述

传统的ssr渲染流程，当用户请求一个页面时，服务器会根据路由匹配到对应的组件，然后渲染该组件，最后将渲染后的html返回给用户。

如果组件中存在异步数据，那么服务端会等待异步数据加载完成之后再渲染，这样可能会导致页面白屏时间较长的问题。

而next.js提供了一种新的渲染方式，即流式渲染。

流式渲染

所谓的流式渲染，就是把一个组件拆分成多个小块，然后分块渲染。
在这里插入图片描述

这样的话，当客户端请求页面时会优先展示静态内容，等到服务端异步数据加载完成并渲染成功后，客户端再继续渲染剩余的内容。

但是，需要注意一点，流式渲染并不会提高整个页面的加载速度，只是将白屏时间缩短了。

Suspense

Next.js提供的Suspense组件和传统的spa中使用的Suspense组件是不同的。

  • 传统spa中的Suspense组件
最低0.47元/天 解锁文章
Next.js 开发指南 路由篇 | App Router
sybh的博客
02-18 3268
路由（routers）是应用的重要组成部分。所谓路由，有多种定义，对于应用层的单页应用程序而言，路由是一个决定 URL 如何呈现的库，在服务层实现 API 时，路由是解析请求并将请求定向到处理程序的组件。简单的来说，在 Next.js 中，路由决定了一个页面如何渲染或者一个请求该如何返回。Next.js 目前有两套路由解决方案，之前的方案称之为“Pages Router”，目前的方案称之为“App Router”，两套方案是兼容的，都可以在 Next.js 中使用。
如何在 Next.js 中构建进度条指示器
分享身边生活经验blog
09-29 796
路由器事件是事件监听器，允许我们通过 Router目的。该对象提供了一些属性，我们可以使用这些属性来监听 Next.js 路由器中发生的不同事件，并根据这些事件执行某些操作。例如，如果我们想记录 "route is changing"每次用户点击一个链接并导航到另一个页面时，我们可以使用 "routeChangeStart" 路由器 事件，如下所示：})这 routeChangeStart当路由开始改变时触发事件。它返回一个回调函数，我们可以使用它来运行代码和操作。
Next.js 实战 (五)：添加路由 Transition 过渡效果和 Loading 动画
白雾茫茫丶
12-31 676
这篇文章介绍了Framer Motion，一个为React设计的动画库，提供了声明式API处理动画和页面转换，适合创建响应式用户界面。文章包括首屏加载动画、路由加载Loading、路由进场和退场动画等主题，并提供了使用Framer Motion和next.js实现这些动画的示例代码。最后，文章总结了这些效果，并邀请读者探讨更好的实现方案。
Next.js的 loading.js
步子哥的博客
01-07 811
在Next.js中，loading.js是一个特殊的文件，它可以帮助你使用React Suspense创建有意义的加载UI。通过使用loading.js，你可以在加载路由内容时显示来自服务器的即时加载状态，并在渲染完成后自动切换到新内容。loading.js的作用是在路由切换期间显示一个加载状态，以便用户知道页面正在加载中。通过使用loading.js和React Suspense，你可以为你的Next.js应用程序创建更好的加载体验，并提供更好的用户反馈。
鸿蒙next加载动画loading旋转组件封装
最新发布
weixin_50142315的博客
05-14 70
常用工具组件，全局loading组件，可设置旋转动画在父组件中的大小
Next.js - Loading UI and Streaming
不想写代码的一天
08-17 1115
要了解 React 和 Next.js 中的流如何工作，了解服务器端渲染（SSR）及其局限性很有帮助。首先，在服务器上获取指定页面的所有数据。然后，服务器渲染页面的 HTML。页面的 HTML、CSS 和 JavaScript 发送到客户端。使用生成的 HTML 和 CSS 显示非交互式用户界面。最后，React 对用户界面进行水合处理，使其具有交互性。这些步骤都是顺序和阻塞性的，这意味着只有在获取了所有数据后，服务器才能渲染页面的 HTML。
next.js无限加载
小码的博客
01-28 784
npm i react-intersection-observer --save import { useState, useEffect, memo, useCallback } from 'react' import styles from '../../styles/home.module.css' import { InView } from 'react-intersection-observer'; function home(props) { const [loading,.
nextJS 懒加载
weixin_44677431的博客
05-19 1750
什么是懒加载 当路由导航到某个模块，或者某个组件的时候，才加载那个模块/组件的js文件。 模块懒加载 第一步，先选择一个需要懒加载的插件，我们拿moment做例子。先安装它： npm install moment -s 第二步，在页面里，用moment写一个例子 const Task = ({ time }) => ( <div> <span>...
Nextjs学习教程
weixin_68658847的博客
06-04 2385
Nextjs使用教程
Next.js 系统性教学：加载界面、重定向与路由分组
二进制的梦想
12-07 1101
Next.js 在加载界面、重定向与路由分组方面提供了强大且灵活的功能。这些特性不仅提高了开发效率，也优化了用户体验。通过合理运用这些工具，开发者可以构建出结构清晰、性能优越的现代 Web 应用。
Next.js加载异步组件 & 骨架屏
远小帅的博客
12-13 2572
Next.js 中有两种处理页面加载的方式，一种是 Loading UI 一种是 Streaming。接下来我将介绍这两种的区别，以及实际的业务场景。当我们进入某个页面时，需要获取页面数据，可能是从数据库读取也有可能是 API 服务，总之这是一个异步任务，我们可以在获取数据过程中提示用户数据正在加载，比如放置一些骨架屏，提升用户的体验。如果不对这些进行处理，使用体验会大打折扣。假设我们有一个场景，进入 /posts 页面后获取所有的文章数据。可以解开上面的注释延长加载时间。
Next.js 加载页面及流式渲染（Streaming）
m0_56699208的博客
06-11 1071
流式渲染是一种渐进式的页面渲染技术，可以在服务器端逐步发送页面内容到客户端，而不是等待整个页面准备好后再发送。这样可以显著减少首次内容绘制（First Contentful Paint，FCP）时间，提升用户感知性能。
NextJS开发：ssr服务器端渲染页面，添加加载进度提示
arslan-robot
11-20 456
nextjs中ssr服务器端渲染的页面加载速度慢的时候，需要显示一个如下图的加载进度提示，来优化用户体验。nextjs框架中已经预留了加载动画的接口页面，我们只需要提那家加载动画tsx，处理页面逻辑就可以实现。page.tsx 同级目录创建loading.tsx。globals.css中添加。
Hexo博客Next主题站内搜索模块相关，解决搜索无效、一直loading的问题
AomanHao的博客
01-31 3742
站内搜索配置 设置方法： 首先安装hexo-generator-searchdb插件 npm install hexo-generator-searchdb --save 编辑博客根目录下的博客本地目录/_config.yml站点配置文件，新增以下内容到任意位置，search顶格放否则可能没效果： search: path: search.xml field: post format...
Next.js 独立开发教程（九）：流式渲染（Streaming）
二进制的梦想
11-28 615
在构建现代 Web 应用时，性能优化和用户体验是开发者的核心目标。随着页面复杂性的增加和动态数据需求的增长，如何快速渲染页面、缩短用户的等待时间成为开发者关注的重点。流式渲染（Streaming）是 Next.js 提供的一种强大功能，可以显著提升页面的加载速度和用户体验。通过流式渲染，开发者可以在服务器端逐步生成 HTML，并将这些内容分片（chunk）发送到客户端，使得页面可以在部分内容尚未加载完成的情况下开始渲染。本文将深入探讨流式渲染的概念、工作原理，以及如何在 Next.js 中实现这一功能。
Suspense组件(未完待续我看不懂了)
bbt953的博客
07-07 254
作用：等待异步组件时渲染一些额外内容，让应用有更好的用户体验使用步骤 setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性(后期也可以返回一个promise实例，但需要Suspense和异步组件的配合)...
nextjs渲染篇
liu289747235的专栏
04-17 1561
默认情况下，Next.js 使用服务器组件。
next server 组件 加载client 组件，使用suspense
solocao的专栏
04-20 689
在Next.js中，你可以使用next/server模块中的suspense功能来实现组件的异步加载。这通常用于在服务端渲染时处理异步数据获取的场景。提供的一个高阶组件，它用于包装异步组件，以便在服务端渲染时处理异步加载的逻辑。特有的API，不是React的一部分，因此它不会在不支持。是一个通过代码分割的方式异步加载的组件。
React 使用Next.js进行服务端渲染
世间万物皆不如你
06-12 1459
Next.js是一个基于React的JavaScript框架，用于构建服务器渲染的React应用程序。它提供了许多有用的功能，如自动代码分割、预渲染、静态导出等，以简化React应用程序的开发和部署。Next.js使用Node.js作为服务器环境，并使用React作为客户端渲染框架。服务器渲染：Next.js支持服务器渲染，可以在服务器端渲染React组件，并将HTML字符串发送到客户端，从而提高性能和SEO优化。自动代码分割：Next.js可以自动将代码分割成小块，以减少页面加载时间，提高性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值