526互联

Next.js 13 如何使用loading.js

发布时间 2023-04-05 17:25:29作者: azoux

要在next.js 13中使用loading.js，我们需要先在对应的文件目录下创建loading.js文件
文件结构如下：

  • app
    • test1
      • loading.tsx
      • page.tsx

如上面的目录结构所示，我们创建了/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>;
}