next.js入门之路-2-loading
更新时间:2024-04-08阅读整篇大约4分钟
next.js提供了两种方式在加载路由对应内容的时候显示加载UI，加载UI会在渲染完成之后，自动被交换为路由所渲染的内容
即时加载状态
通过创建与layout.tsx同级的loading.tsx文件来达到实现Loading效果
会受到层级影响，子项会被包含在父项中
和
layout.tsx一样，只需要提供就行，next.js自己会检测到
tsx
// ./loading.tsx
export default function Loading() {
// You can add any UI inside Loading, including a Skeleton.
return <>loading</>
}流媒体加载
将页面分解成许多的块，这些块只要自身加载完成就会被转换为真实内容，不用等待其他块中的内容加载完成
例如
tsx
<div className={style.base_layout}>
<header>
<Suspense fallback={<Loading></Loading>}>
<Header />
</Suspense>
</header>
<div className={style.base_layout_main}>
<section>
<main>
<Suspense fallback={<Loading></Loading>}>
<MainField />
</Suspense>
</main>
<aside>
<Suspense fallback={<Loading></Loading>}>
<AsideBar />
</Suspense>
</aside>
</section>
</div>
</div>这样一个布局，这样header、main、aside的loadingUI不会等到都加载完才替换，而是自己本身的内容加载完之后就开始替换
两种方式可以共存，一个是page级别的，一个是component级别
小白的加载方式
这种不是官网的，这是我自己在没看文档之前的实现方式，大致思路是通过给定一个div并将z-index设置为足够大，给定相对定位，这个div的子项可以是一些loadingUI，以此来遮住实际的内容，并用一个状态来控制其是否展示，我们知道当我们使用use client的时候，服务端依旧会执行一遍，拿到一些可以在服务端就生成的部分，一些hooks会以他的初始值作为服务端执行时的值，比如useState,当然他不会执行useEffect这样在dom挂载完毕之后才执行的部分，这个是next.js对react的一些hooks的一些处理，所以我们完全可以设置缺省值为false，并在useEffect中将他变为true，这样也可以做到一种加载Loading，当然在看了官网文档之后，这种方式毫无悬念的被我舍弃了，具体原因是部署到服务器上之后实际体验并不是很好。
tsx
'use client'
export const ProcessLayout = ({ children }: IProps) => {
const [loading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
}, []);
return (
<>
{loading ? (
<div className={style.load_mask}>
<LoadDom />
</div>
) : null}
{children}
</>
);
};下一篇记录
next/Image