Next.js 13 如何使用loading.js
<p>要在next.js 13中使用loading.js，我们需要先在对应的文件目录下创建loading.js文件<br>文件结构如下：</p>
<ul>
<li>app
<ul>
<li>test1
<ul>
<li>loading.tsx</li>
<li>page.tsx</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>如上面的目录结构所示，我们创建了/test1路径下的页面，以及其对应的loading组件</p>
<p>我们知道，nextjs 13 的组件默认都是服务端渲染（Server-side Rendering），但是当服务端渲染组件需要较长的时间时，可能会对用户造成一些不好的体验，具体表现为网页一直在加载，但一直没有响应。<br>
那么如何在服务端渲染的时候及时给予用户反馈呢，这时我们就可以用到nextjs 13提供的new feature，loading组件</p>
<pre><code class="language-tsx">// Loading.tsx
export default function Loading() {
return (
<>
<h1 className="text-yellow-200 text-3xl">Loading...</h1>
</>
);
}
</code></pre>
<p>我们在page.tsx中做了一个睡眠三秒钟的操作，来模拟服务端需要长时间渲染的场景，这时在我们访问/test1路径时，页面就会在前三秒时展示Loading... ，等到服务端渲染完成就会展示：after 3000 ms!<br>
同时我们也可以在控制台中看到 in executing sleep!的输出，这证明了我们正在进行服务端渲染。</p>
<pre><code class="language-tsx">// 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>;
}
</code></pre><br><br>
来源：https://www.cnblogs.com/azoux/p/17289923.html
頁:
[1]