五、loading

新增 app/loading.tsx 页面

const Loading = () => {return <div>Loading...</div>;
};
export default Loading;

修改 app/page.tsx页面

/** 假设为一个获取数字的api */
const fetch_getNumber = async (): Promise<number> => {return new Promise((resolve, reject) => {setTimeout(() => {resolve(1);}, 2000);});
};export default async function Home() {/** 调用接口，获取num */const num: number = await fetch_getNumber();/** 先展示 app/loading.tsx 页面，promise进入resolve 状态 展示 app/page.tsx页面 */return (<div className="border-2 border-yellow-500 w-100 h-100">hello next.js Home Page<div>num: {num}</div></div>);
}

npm run dev

访问： http://localhost:3000

loading.tsx 的实现原理是将 page.tsx和下面的 children 用 <Suspense> 包裹。因为page.js导出一个 async 函数，Suspense 得以捕获数据加载的 promise，

借此实现了 loading 组件的关闭。