searchusermenu
  • 发布文章
  • 消息中心
点赞
收藏
评论
分享
原创

Next.js 13 如何使用loading.js

2023-10-30 09:53:32
11
0

要在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>;
}
0条评论
0 / 1000
luluuuu
10文章数
0粉丝数
luluuuu
10 文章 | 0 粉丝
原创

Next.js 13 如何使用loading.js

2023-10-30 09:53:32
11
0

要在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>;
}
文章来自个人专栏
javascript
7 文章 | 1 订阅
0条评论
0 / 1000
请输入你的评论
0
0