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

user_19097485 0
Viewed 1314

I'm basically building a calendar of upcoming events for the year, each event acts like a blog post with its own thumbnail, and page. A pretty straightforward CMS set up.

I'm using FaunaDB and fetching in getStaticProps().

I then use component logic to break down the events into blocks of months and render a month at a time with an infinite scroll that re-renders and adds more months as you scroll down.

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?

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

I get that I can just build components that make frequent client side fetch requests to my database – but surely this defeats the point of using Next.js, (plus I need getStaticPaths() to generate the pages for each event.

On a side note, there will be POST route that adds a new calendar event and triggers a rebuild – will next.js build the entire site from scratch, or is it clever enough to only build the new calendar event.

Thanks!

next.js reactjs fetch-api content-management-system database
1 Answers

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

Millions of events? Sure, it will. I suggest using an approach that scales. You could just get away with hundreds of records, but when you get millions of records, you'll have to take some actions eventually.

Is this the best practice for large amounts of data?

No. Normally you do not need all data in getStaticPaths. You should just fetch enough data for initial render in getStaticPaths, and re-fetch more data on client side whenever you need them. In your case, you don't need to fetch all the events in getStaticPaths. You could just fetch events of this month (and maybe last and next month) in getStaticPaths, and re-fetch more events whenever user moves to other month(think of Google Calendar).

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

It depends. When you notice something is slow, it's a good indication that it is too much.

user_86366500
Related