要在next.js 13中使用loading.js,我们需要先在对应的文件目录下创建loading.js文件
文件结构如下:
- app
- test1
- loading.tsx
- page.tsx
- test1
如上面的目录结构所示,我们创建了/test1路径下的页面,以及其对应的loading组件
我们知道,nextjs 13 的组件默认都是服务端渲染(Server-side Rendering),但是当服务端渲染组件需要较长的时间时,可能会对用户造成一些不好的体验,具体表现为网页一直在加载,但一直没有响应。
那么如何在服务端渲染的时候及时给予用户反馈呢,这时我们就可以用到nextjs 13提供的new feature,loading组件
// Loading.tsx
export default function Loading() {
return (
<>
<h1 className="text-yellow-200 text-3xl">Loading...</h1>
</>
);
}
我们在page.tsx中做了一个睡眠三秒钟的操作,来模拟服务端需要长时间渲染的场景,这时在我们访问/test1路径时,页面就会在前三秒时展示Loading... ,等到服务端渲染完成就会展示:after 3000 ms!
同时我们也可以在控制台中看到 in executing sleep!的输出,这证明了我们正在进行服务端渲染。
// page.tsx
export default async function Test() {
const message = await new Promise<string>((resolve) => {
console.log('in executing sleep!')
setTimeout(() => resolve("after 3000 ms!"), 3000);
});
return <h1>{message}</h1>;
}