在 Next.js 中获取大量数据的最佳实践?

Best practice fetching large amounts of data in Next.js?

我基本上是在为今年即将发生的事件建立一个日历,每个事件都像一个博客 post,有自己的缩略图和页面。一个非常简单的 CMS 设置。

我正在使用 FaunaDB 并在 getStaticProps() 中获取数据。

然后我使用组件逻辑将事件分解为以月为单位的块,并使用无限滚动一次呈现一个月,当您向下滚动时,它会重新呈现并添加更多月份。

如果我最终在日历中有数百个事件,它会导致 getStaticProps 变慢或中断吗?

这是处理大量数据的最佳做法吗?

在getStaticProps中一次获取多少数据太多?

我知道我可以只构建组件来频繁地向我的数据库发出客户端获取请求——但这肯定会破坏使用 Next.js 的意义,(另外我需要 getStaticPaths() 来生成页面每个事件。

附带说明,将有 POST 添加新日历事件并触发重建的路由 – 将 next.js 从头开始​​构建整个站点,还是足够聪明,只构建新的日历事件。

谢谢!

If I end up with hundreds of events in the calendar will it cause getStaticProps to slow down, or break?

数百万个事件?当然,它会的。我建议使用可扩展的方法。您可以只处理数百条记录,但当您获得数百万条记录时,您最终将不得不采取一些措施。

Is this the best practice for large amounts of data?

没有。通常您不需要 getStaticPaths 中的所有数据。您应该只在 getStaticPaths 中获取足够的数据用于初始渲染,并在需要时在客户端 re-fetch 获取更多数据。 在您的情况下,您不需要获取 getStaticPaths 中的所有事件。您可以只在 getStaticPaths 中获取本月(可能还有上个月和下个月)的事件,并在用户移动到其他月份时获取 re-fetch 更多事件(想想 Google 日历)。

How much datas is too much to fetch in one go in getStaticProps?

视情况而定。当您发现某些东西运行缓慢时,这是一个很好的迹象,表明它太多了。