Can I know exactly you need help with here?

Also is this api from your own servr? Because then you can add query params to allow pagination and sorting and do that in the backend similar to most api

My ways are:
- Fetch data from api (not mine) on client side. It is array with 4k+ objects.

- Pass each objects in the client component. Client component has search functionality.

- When user call this component to show all 4k objects and use search to find one it took so long to fetch data and search.

It isn't problem to make pagination it will increase ux and decrease load all object but anyway user wait when all data will be available to make correct search.
I'm thinking about server side render to fetch all data.
@Anay-208 @Netherland Dwarf

Its best to search in server side, just give a fetch Req to server side

Thanks! But how be with component, because I'm using this component in client side?

in client side, fetch from api again

or server action

oh, you mean make my own api over external api?

within nextjs, I make my own api(or route.ts) or server action

let me try, thank you!

Hey there @Sun bear, any updates regarding this issue?

Just to expand on anay-208, Next.js is a fullstack framework, not only a client-side one.

You can define an API route in which, theoretically, you can request and cache the response of the data you need on the server, and thus, you can split it into chunks (say pages), so you can consume it client-side in parts.

https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-server-with-fetch

Still working on it, will try tomorrow

@Anay-208 here is update, I have made server side fetching. But my fetching is just using some lib to get data, so I can't update fetched data like if I've fetched from classic api fetch('https://...', { next: { revalidate: 3600 } })

Maybe look into tanstack react-query? U can revalidate using it

Yea that could work but then he'd receive 4k records client-side, if the application goes over a fast connection that's fine imo.

You can revalidate on demand, look at here in the docs, you can make a function to invalidate that cache and update it accordingly.

So if your data becomes outdated (because you created, edited or deleted an entry), you can revalidate the tag associated with that request.

Also depends on what these records hold, it's different between 4-5 fields to 10-15 depending of the data they're handling.

Thank you guys, let me check

so I don't use fetch, there is just lib that use it (I guess) so not sure how to revalidate data on this case. Thinking about moving getValidators to backend api route

You can use a cache function for this

And if you need to invalidate this, you can use revalidatePath

looks like it is what i'm looking for! Thank you!

hm, may I ask ? In which cases using this for invalidate data? For example

Imagine you just edited the data, with a form, or created a new entry.

If you don't invalidate, then the data will be the same for an hour.

So thank you all! My solution is: using pagination or load more button to show all items, and inside cache use lib to get data and inside server component add revalidate time! Looks good, isn't it?

oh, it is look like google form, when I return to my form there are data in the filed that I've added

This sounds correct!

I don't know much about Google Forms, but if you can add a secret key to Google Forms and call that function to your Next.js API, you can invalidate the data after new one is added.

Without it, the data would be updated depending of your revalidateTime.

If that answers your question don't forget to mark it as solved!

Thank you!