Next.js Discord

Discord Forum

How to fetch data and use it between pages and components?

Answered
Saltwater Crocodile posted this in #help-forum
Open in Discord
Saltwater CrocodileOP
I want to implement a system with NextJS where data such as categories, devices, reservations are needed across multiple pages repeatedly (For making a reservation, one needs to select the device from a list, to create a device one must select a category from the list, ...). My question now: What's the best way to fetch and process the data? Should I simply fetch it every time via API or use global state management like Zustand or Redux?
Answered by Plott Hound
Wrap the prisma query with unstable_cache and give it a tag name. That’s the key you’ll use to revalidate it
View full answer

9 Replies

Plott Hound
I think taking advantage of caching here would make a lot more sense than trying to store things locally. Depending on your data source (I’m guessing a database) you can wrap your queries with unstable_cache and revalidate the data as needed with revalidateTag. If you’re using fetch then it is cached by default but can be revalidated as needed
amaterasuplayer
Yeah I've only been using NextJS for a couple months but if you fetch from a server component the results are automatically cached.

Here are the resources I used to understand this:

Prerequisite knowledge: https://www.youtube.com/watch?v=5-1LM2NySR0

up to 8:30 https://www.youtube.com/watch?v=51pf_nCJpwg
Saltwater CrocodileOP
even though my data can be updated any time and needs to be updated instant on the main Page? e.g. at a dropdown menu or a data table?
should i use fetch or get the data via prisma directly
@Saltwater Crocodile should i use fetch or get the data via prisma directly
Plott Hound
yes you can fetch data directly in an RSC
@Saltwater Crocodile even though my data can be updated any time and needs to be updated instant on the main Page? e.g. at a dropdown menu or a data table?
Plott Hound
yes. when the data changes you would use revalidateTag or revalidatePath to fetch the fresh data again
@Plott Hound yes. when the data changes you would use revalidateTag or revalidatePath to fetch the fresh data again
Saltwater CrocodileOP
If i use Prisma and get it directly, how do i use revalidateTag?
@Saltwater Crocodile If i use Prisma and get it directly, how do i use revalidateTag?
Plott Hound
Wrap the prisma query with unstable_cache and give it a tag name. That’s the key you’ll use to revalidate it
Answer
Saltwater CrocodileOP
Thank you ! @Plott Hound