nextjs 加载时间过长答案

【问题标题】：too much loading time in nextjsnextjs 加载时间过长
【发布时间】：2021-09-01 08:20:39
【问题描述】：

我是 Nextjs 的新手。我已经实现了一个页面。使用 SSR。但正如您在图片中看到的，有很多工作箱在运行，每个工作箱持续 100 到 300 毫秒，这增加了加载时间。

【问题讨论】：

【解决方案1】：

我看到了你的问题。您一次加载所有图像和产品组件，因此整个网站都滞后。您必须拆分搜索，每个视口可能有 10 到 15 个产品，当用户滚动到最后时，加载接下来的 10 到 15 个产品等等。

您可以将 useEffect 与 useState 一起使用。

另外，调整 API 以有时获取有限的数据，

即：

【讨论】：

我做了你说的一切，只有一个问题，那就是对于每张包含图片和文本的卡片，我都有一个名为 ProductCard 的组件。页面上映射了 12 个 ProductCard，我不知道如何在视图中使用它们以避免生成不在视图中的卡片。更准确地说： {productList?.map((item) => ( ))}
你可以使用无限滚动组件进行反应
另外需要注意的是，您使用的是 SSR，因此页面首先在服务器中转换为纯 HTML，然后提供，这意味着 HTML 很大，这就是它速度较慢的原因。不使用Server Side Fetching，直接在组件中使用useEffec()，在客户端获取数据