nextjs13 do get request with searchbar

Ppolkeng26/1/2023
Hi, I am currently building a nextjs 13 project, trying to get in touch with the app router and server components. I currently have a searchbar, which is a client component, and I want it to do a get request from an api with the input from the searchbar. Should that request be done in a client component with something like react-query or is there some work around to be able to fetch inside a server component?
NNeto6/1/2023
do in the server component use the url to send a search param https://yoursite.com/something?search=some
Ppolkeng26/2/2023
I have a page that uses react-table to display some data from the backend. When I search something, I want to do a filtered fetch from my API and load that data in the table. If I do your approach I will be rerendering the whole page everytime I do a search instead of just rerendering the table right? Is that better than fetching data on a client component? Also is that good practice if I have multiple filters?
NNeto6/2/2023
if you want to use app router and server components that is what should be done seems like your case is a client only search
Ppolkeng26/2/2023
maybe this is a very noobie thing to ask, but how do I know if my case is a client only search or not? and ty for the help btw
NNeto6/2/2023
If you have to rely in heavy interactivity, maybe a client component is worth it Does not mean that you can't use server components If you want to make a search that the user can add multiple params, before searching, you can use a server component
Ppolkeng26/2/2023
okay maybe I will try using a server component thanks!

Looking for more? Join the community!

Want results from more Discord servers?
Add your server
Recommended Posts
How to sent a mutation procedure from the clientupdateUserStats:protectedProcedure .input(z.object({ id:z.string().nonempty(), pServer Actions high level questions (scale, request library, exposing to other clients)**1) how are you supposed to scale a backend if your business logic is in react components?** if thiupload thing jesthow to i set up testing with jest on components that include uploadthing? [2:40 PM] seems like it keNextJS and Bare MetalWhat all features would break/may not work if I decide to deploy to NEXTjs to bare metal instead of Cloud storage solutions for collaborating on local filesI want to collaborate on .md files (via Obsidian. for developer documentaion) and video recordings wcold startsI’m having an issue with my first queries after the db going idle taking about 11s to 12s which is cAndroid emulator cannot connect to my Expo without tunnelHello, I am building an app with `create-t3-turbo` in windows 11. I keep getting the error connectis this middleware is good for longterm?hello guys, in these code snippet i want to check if user is subs and valid, but i im wondering if tBidrectional Infinite Scrolling ImplementationHi guys have you ever implemented something like this in a chat application? or any application for Is it possible to generate a github action to build a preview of a pull request in nextjs?Im looking for a way to generate preview for my nextjs project but I didnt find a way to do it that File Uploads to Local StorageI'm building a website for my brother's shop. They want an admin panel where they can add new producChange ctx.session.user values to include new ones? Bad idea?Right now when using `ctx.session.user` I get a few default options that come with t3-app. `.id`, `Next13 app-router: How to get request headers on client page comp?All my pages are client components because I want to use page transitions and need to wrap them in aCan i send a file from trcp router?I want to send a xlxs/csv file to FE (expo). Can i do this like expressJs? or do i need to first upluseSession has an empty user object {}When using the useSession hook, session.data contains `{ user: {}, expires: '2023-06-30T20:30:42.181TypeSafe external API ?I am currently communicating with an external API and after falling in love with TRPC, I would like Want to request only half of the audio file but not workingi request an audio file from my server and stream it to the browser .. on the browser i make a requeHow is realtime DB syncing accomplished without Firestore/Supabase?Hi! I've been working with Firestore for a long time now and gotten very used to the realtime db synDrag and drop library recommendation?Whats the community-favorite option right now? I saw that react-beautiful-dnd isn't being maintainedtRPC invalid_type error with ClerkHi, I have this weird issue I've been trying to resolve for a while now. This is the error in brows