MUI Data Grid Server-Side Pagination
Answered
German Shepherd Dog posted this in #help-forum
German Shepherd DogOP
I am using the Material UI Data Grid in my next.js app to display large amounts of data. Instead of loading it all at once, I want to implement server-side pagination where I initially only fetch 20 entries from my API, then fetch the next 20 when the user enters page 2 etc.
I don't want to expose my API secret so I am trying to avoid fetching the data in the client component, but I can't find a different way to fetch it. What is the best approach here?
I don't want to expose my API secret so I am trying to avoid fetching the data in the client component, but I can't find a different way to fetch it. What is the best approach here?
Answered by Grass Carrying Wasp
I think you can use the api route of your nextjs server to fetch the data, that way, you wouldn't need to expose your api key in the frontend. Your route handler would be like a proxy. Be careful about the caching though, and server actions is an option too.
7 Replies
Grass Carrying Wasp
I think you can use the api route of your nextjs server to fetch the data, that way, you wouldn't need to expose your api key in the frontend. Your route handler would be like a proxy. Be careful about the caching though, and server actions is an option too.
Answer
German Shepherd DogOP
so i'd basically create a sort of secondary API within my nextjs app which calls my real API
Grass Carrying Wasp
yeah, that's the only way I can think of doing it without passing your api secret to the client
maybe you can also use cookies..
German Shepherd DogOP
ill give it a try, thank you!
German Shepherd DogOP
@Grass Carrying Wasp its working, thanks a lot!
Grass Carrying Wasp
Glad I helped!