洛江网站建设报价,网络推广和网络销售的区别,h5模板网站免费,网站美工工作步骤是什么loading加载
loading.js 可以帮助你使用React Suspense创建一个组件, 当你在加载路由内容时#xff0c;它会显示该加载状态组件#xff0c;渲染完成后#xff0c;新的内容将会自动替换。
传统ssr渲染流程 传统的ssr渲染流程#xff0c;当用户请求一个页面时#xff0c;服…loading加载
loading.js 可以帮助你使用React Suspense创建一个组件, 当你在加载路由内容时它会显示该加载状态组件渲染完成后新的内容将会自动替换。
传统ssr渲染流程 传统的ssr渲染流程当用户请求一个页面时服务器会根据路由匹配到对应的组件然后渲染该组件最后将渲染后的html返回给用户。
如果组件中存在异步数据那么服务端会等待异步数据加载完成之后再渲染这样可能会导致页面白屏时间较长的问题。
而next.js提供了一种新的渲染方式即流式渲染。
流式渲染
所谓的流式渲染就是把一个组件拆分成多个小块然后分块渲染。
这样的话当客户端请求页面时会优先展示静态内容等到服务端异步数据加载完成并渲染成功后客户端再继续渲染剩余的内容。
但是需要注意一点流式渲染并不会提高整个页面的加载速度只是将白屏时间缩短了。
Suspense
Next.js提供的Suspense组件和传统的spa中使用的Suspense组件是不同的。
传统spa中的Suspense组件需要搭配React提供的lazy函数一起使用用于加载异步组件。Next.js中的Suspense组件则是用于加载异步数据的不需要搭配lazy函数当异步组件渲染完成时会显示该组件中的内容。还需要注意一点Next.js中的Suspense并不会主动分包而spa中的会根据import函数中的path自动分包这一点需要额外注意。
Example
app/post/page.js
import { Suspense } from react
import { PostFeed, Weather } from ./Componentsexport default function Posts() {return (sectionSuspense fallback{pLoading feed.../p}PostFeed //SuspenseSuspense fallback{pLoading weather.../p}Weather //Suspense/section)
}PostFeed
export default async function PostFeed() {const list await fetch(https://xxx)return (prelist/pre)
}Weather
export default async function Weather() {const list await fetch(https://xxx)return (prelist/pre)
}为了方便读者阅读完整的教程可直接访问作者的教程文档 https://blog.chdl.fun/ChBlog/docs/category/nextjs
