Data Fetching
Answered
i_lost_to_loba_kreygasm posted this in #help-forum
Can anybody tell me if I should fetch data from an API inside each server components(there are 4 components) ? or should I use fetch data inside a single Context Provider Component and pass the data to all components ?
Answered by B33fb0n3
I recommend you to not put it inside a context provider so you only need to fetch once.
I recommend you to fetch it in each server component. Why? Because in nextjs there is something called "memorization". So even if you call it 10.000 times on all different places, the external api will only receive one single call and all these 10.000 requests, will get the same result. And you don't even need to setup something like helpers or context provider or anything else.
You might want to take a look at this: https://nextjs.org/docs/app/building-your-application/caching#request-memoization
I recommend you to fetch it in each server component. Why? Because in nextjs there is something called "memorization". So even if you call it 10.000 times on all different places, the external api will only receive one single call and all these 10.000 requests, will get the same result. And you don't even need to setup something like helpers or context provider or anything else.
You might want to take a look at this: https://nextjs.org/docs/app/building-your-application/caching#request-memoization
21 Replies
Asiatic Lion
hi, @i_lost_to_loba_kreygasm .
I think you should fetch data inside a single Context Provider for reusability and maintaining.
I hope this would help you.
I think you should fetch data inside a single Context Provider for reusability and maintaining.
I hope this would help you.
I am thinking this too but I am wondering if I should fetch server side for SEO
Asiatic Lion
Do you use microservice architecture?
Sorry, Idk what that means
I am just making this project for a better portfolio
Asiatic Lion
Can you share the directory architecture of your project?
meh , I am gonna fetch in my context file
Asiatic Lion
You should create a helper function for data fetching.
@i_lost_to_loba_kreygasm Can anybody tell me if I should fetch data from an API inside each server components(there are 4 components) ? or should I use fetch data inside a single Context Provider Component and pass the data to all components ?
I recommend you to not put it inside a context provider so you only need to fetch once.
I recommend you to fetch it in each server component. Why? Because in nextjs there is something called "memorization". So even if you call it 10.000 times on all different places, the external api will only receive one single call and all these 10.000 requests, will get the same result. And you don't even need to setup something like helpers or context provider or anything else.
You might want to take a look at this: https://nextjs.org/docs/app/building-your-application/caching#request-memoization
I recommend you to fetch it in each server component. Why? Because in nextjs there is something called "memorization". So even if you call it 10.000 times on all different places, the external api will only receive one single call and all these 10.000 requests, will get the same result. And you don't even need to setup something like helpers or context provider or anything else.
You might want to take a look at this: https://nextjs.org/docs/app/building-your-application/caching#request-memoization
Answer
@i_lost_to_loba_kreygasm my api is internal , hope that's ok
that's even worse. Then you should never fetch your own endpoints. That would only create additional traffic. You might want to read this: https://nextjs-faq.com/fetch-api-in-rsc
I understand that fetching server side is the way , but I am just trying to mimic in real life scenarios . I imagine that I would fetch from an external api
but I dont have one , so I am using my own internal api
@i_lost_to_loba_kreygasm but I dont have one , so I am using my own internal api
ok, then do yourself a favor and extract the logic inside a function and only call this specific function. If you need external access in the future then you can still create an endpoint and call the function there as well
@B33fb0n3 ok, then do yourself a favor and extract the logic inside a function and only call this specific function. If you need external access in the future then you can still create an endpoint and call the function there as well
hi . I am using using useSearchParams in a client component but I want to convert it into server component , how can I replace useSearchParams?
const searchParams = useSearchParams();
const query = searchParams.get('q')?.toLowerCase();@i_lost_to_loba_kreygasm hi . I am using using useSearchParams in a client component but I want to convert it into server component , how can I replace useSearchParams?js
const searchParams = useSearchParams();
const query = searchParams.get('q')?.toLowerCase();
hi again. Is your initial question "Data Fetching" solved [like that](https://nextjs-forum.com/post/1311930217085931520#message-1311940960707674184)?
@i_lost_to_loba_kreygasm hi . I am using using useSearchParams in a client component but I want to convert it into server component , how can I replace useSearchParams?js
const searchParams = useSearchParams();
const query = searchParams.get('q')?.toLowerCase();
this thread is already solved. Please open a new thread with that message. You are allowed to ping me in your future threads. So just ping me in your new threads like @B33fb0n3