Next.js Discord

Discord Forum

Filter data fetched on a Server Side Component

Answered
Saltwater Crocodile posted this in #help-forum
Open in Discord
Saltwater CrocodileOP
So I want to fetch the data from lol champions and make a searchbar wich filter the champions. This is my actual code:

import Image from 'next/image'

const fetchData = async () => {
  const res = await fetch('http://ddragon.leagueoflegends.com/cdn/13.17.1/data/en_US/champion.json')
  const data = await res.json()
  return data.data
}

export default async function Home() {

  const champions = await fetchData()

  const championEntries = Object.keys(champions)

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-10 md:p-24">
      <div className='flex flex-col p-2 bg-[#0d1117]'>
        <input type="text" name="" id="" className='bg-black m-1' />
        <div className='grid md:grid-cols-8 max-w-7xl bg-[#0d1117] grid-cols-4'>
          {
            championEntries.map((championEntry) => {
              return <Image className='rounded-lg m-1 md:m-1 w-16 md:w-24 brightness-90 hover:brightness-100' alt={champions[championEntry].name} src={`https://ddragon.leagueoflegends.com/cdn/13.17.1/img/champion/${champions[championEntry].image.full}`} width={100} height={100} />
            })
          }
        </div>

      </div>
      
      
    </main>
  )
}


So, if I cant use useState to filter because I cannot fetch on a client component and I cannot filter in a ServerSide comp, so what is the best approach. I've investigating about reactQuery or other libraries but I don't know if this is the correct way
Answered by European sprat
depending on your use case you could fetch it in the server component and pass the result as props to client component then do the filtering in the client component
View full answer

26 Replies

European sprat
You most definitely can useState in client components
Saltwater CrocodileOP
yes
but I cannot fetch data on them
European sprat
why not?
and you can also fetch it in the server component, pass the data as a prop to the client component which does the filtering
Saltwater CrocodileOP
Nop
If I add 'use client'
It throws this error:
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.
European sprat
the component can't be async but you can fetch inside a handler or a useEffect
same as you would for any other react app
Saltwater CrocodileOP
how would it be inside a handler?? And it would be the best option?
European sprat
i don't know how you have things setup but one way would be to fetch onChange of an input box
something like that
or onClick, whatever
Saltwater CrocodileOP
but that would be calling the api every time and wouldnt be very efficent
European sprat
depending on your use case you could fetch it in the server component and pass the result as props to client component then do the filtering in the client component
Answer
Saltwater CrocodileOP
I tried that but the parent of the client component must be a client component too
throws same err
show your code for that if you have it
Saltwater CrocodileOP
Mmmm ok it seems that it works
thank you!
The app I want to do I have to make a lot of api calls so, do you recommend any library or jst nextjs13 to make all those api calls
@Saltwater Crocodile The app I want to do I have to make a lot of api calls so, do you recommend any library or jst nextjs13 to make all those api calls
European sprat
using fetch in server components will gives you the main features of nextjs13 app router for caching stuff
Saltwater CrocodileOP
ok thank u!