当页面的某个部分触发请求时，如何避免 Nextjs 显示整个页面的加载状态？

Question

我有一个使用loading.tsx方法的nextjs页面，所以当这个页面加载时，我的加载微调器会出现，直到整个页面加载完毕，这很酷。然而，在这个页面中，我有一个弹出卡，通过悬停某些元素来加载，这个弹出窗口向服务器发出请求以获取一些数据，但是当请求发生时，整个页面进入加载状态，直到请求完成。我怎样才能避免这种情况？

我尝试在发出此请求的弹出窗口周围添加一个，但没有解决问题。

Answer 1

这就是

loading.tsx

组件的工作原理：它在异步操作运行时替换页面上的所有元素。

在我看来，这里最好的方法是用

Suspense

包装 Popup 组件，并为其提供不同的后备，类似于 here。

另一种更受控制的方法涉及删除

loading.tsx

并向使用异步操作的组件添加

Suspense

包装器。然后，您可以为每个组件创建

skeletons

，这可以改善用户体验，但需要更多工作。

因此，如果您想保留当前的方法并简单地阻止

loading.tsx

在弹出窗口加载时加载，我建议您遵循第一种方法。